Kontrollerad image slider

Hej alla,

jag vill kunna skapa en enkel image slider men hittar inga tips runt om på nätet varför jag hamnar här hos er experter.

Så här vill jag presentera det.

<div class="myContent">
<div>Innehåll eller bild där man kan klicka sig vidare till nästa bild</div>
<div>Innehåll eller bild där man kan klicka sig vidare till nästa bild</div>
<div>Innehåll eller bild där man kan klicka sig vidare till nästa bild</div>
<div>Innehåll eller bild där man kan klicka sig vidare till nästa bild</div>
</div>

Jag vill kunna klicka bort ena bilden och ta fram nästa bild genom att klicka på en länk i innehållet -<a class="next" href=""><img src=""></a>

Jag har testat fram och tillbaka men får inte riktigt till det. Är det någon som kan hjälpa mig här?

Tänker mig något enkelt som nedan typ.

$(".next").click(function () {
	$(this).parent().fadeTo(400, 0);
});

Jag vill inte ha en pager, eller något annat för att navigera. Jag vill att man ska kunna klicka sig vidare genom en vanlig länk väl inne i <div>

Jag har gjort en liknande grej, gjorde dock i plugget så brydde mig inte så mycket om att snygga till koden. Vet att man enkelt kan få ner koden till mycket mindre

<script type="text/javascript">
$(document).ready(function(){
	function initpage(){
		countimages();
		updatetext();
	}
	function countimages(){
		var count = $('#imagebrowser IMG').length;
		var show = $('#imagebrowser IMG').index($('.active')) + 1;
		
		$('.cti').text('Bild ' + show + ' av ' + count);
	}
	function nextimage(){
			var $active = $('#imagebrowser IMG.active');
			var $img = 'first';
			var $next = $active.next().length ? $active.next() : $('#imagebrowser IMG:' + $img);
			
			$next.addClass('active');
			$active.removeClass('active');
			countimages();
			updatetext();
	}
	function previmage(){
			var $active = $('#imagebrowser IMG.active');
			var $img = 'last';
			var $prev = $active.prev().length ? $active.prev() : $('#imagebrowser IMG:' + $img);
			
			$prev.addClass('active');
			$active.removeClass('active');
			countimages();
			updatetext();
	}
	function updatetext()
	{
		var $active = $('#imagebrowser IMG.active');
		$('span.imagetext').text($active.attr('alt'));
	}
</script>

Sen la jag bara bilderna såhär

		<div id="imagebrowser">
		<img src="images\img1.jpg" class="active" alt="Kommentar1"/>
		<img src="images\img3.jpg" alt="Kommentar2"/>
		<img src="images\img2.jpg" alt="Kommentar3"/>
		<img src="images\img4.jpg" alt="Kommentar4"/>

		</div>

Sen får man förstås styla så att endast den med klassen active syns.

Gildebrand > tack för tipset!

Jag vill egentligen bara ta fram några slides (bilder eller innehåll) kunna klicka på dessa med knapparna nästa eller tillbaka. Bilderna ska då fadas ut och fadas in. Hur vårt kan det vara, jag har fan suttit hela dagen och kommer inte längre vidare.

Är ju inte direkt svårt: http://voigt.se/sandbox/imagerotator2/ gjorde jag förra året, kanske inte den bästa javascripts koden (behöver rensar den) men där har du nog allt du är ute efter.

Intressant Voigt!

Ska kolla på detta. Vill dock inte ha fasta ikoner/bilder för prev och next. Får återkomma.

Det behöver du inte, det är bara min CSS som säger att det skall vara det, har dock inte möjlighet att ändra språk strängarna (än).

Har suttit en del ikväll och ditt script fungerar bra men det är fortfarande väldigt mycket i koden som jag inte förstår mig på - varför det finns och vad det har för funktion.

fråga på, ta bort kod du inte gillar, gör vad du vill, lite svårt att svara på de problem du ser utan att du säger vad du tycker är problem med min kod ;)

(function($) {
	$.fn.extend({
		imageRotator: function(options) {
			var defaults = {
				"speed": 300,
				"wait": 3000,
				"index": 0,
				"controls": true,
				"autoPlay": true,
				"showTimer": false
			};

			var options = $.extend(defaults, options);

			return this.each(function() {
				var prevController = null, nextController = null, timeOut;
				var that = $(this);
				var child = that.children();
				var timer = null;
				var nextIndex = options.index;
				var height = 0, width = 0;

				//Group all children to the same position.
				that.css({
					'position': 'relative'
				}).children().css({
					"position" : "absolute",
					"top": that.css("paddingTop"),
					"left": that.css("paddingLeft"),
					"display": "none"
				}).eq(options.index).css({
					"display": ""
				});

				if(options.controls)
					addController();

				resize(0);

				if(options.autoPlay) {
					animate(next);
					if(options.showTimer)
					{
						timer = $('<div class="progressBar"><div></div></div>').hide();
						$(that).mouseover(function(){ timer.show()}).mouseout(function(){ timer.hide();});
						that.append(timer);
						animeateProgressBar();
					}
				}
				function resize(speed) {
					var childObj = child.eq(nextIndex);
					height = childObj.height();
					width = childObj.width();
					that.animate({
						"height": height + "px",
						"width" : width + "px" 
					}, speed);

					if(options.controls)
						updateButtonPosition(height, width, speed);
				};
				function next() {
					nextIndex = options.index+1>=child.length ? 0 : options.index+1;
					doAnimation(next);
				};
				function prev() {
					nextIndex = options.index-1<0 ? child.length-1 : options.index-1;
					doAnimation(prev);
				};
				function doAnimation(autoPlayFunction) {
					child.eq(options.index).fadeOut(options.speed);
					child.eq(nextIndex).fadeIn(options.speed);
					resize(options.speed);
					options.index = nextIndex;
					if(options.autoPlay){
						animate(autoPlayFunction);
					}
				};
				function animeateProgressBar(){
					$(".progressBar",that).css({width: width + 'px'});
					$(".progressBar div",that).stop().animate({'width': width + 'px'},0).animate({'width': '0px'}, options.wait);
				};
				function animate(func) {
					if(options.showTimer)
						animeateProgressBar();
					clearTimeout(timeOut);
					timeOut = setTimeout(func, options.wait);
				};
				function addController() {
					prevController	= $('<div class="prev">Previous</div>').click(function() {
						prev();
					}).css({
						"position" : "absolute"
					});
					nextController	= $('<div class="next">Next</div>').click(function() {
						next();
					}).css({
						"position" : "absolute",
						"right" : that.css("paddingRight")
					});
					that.append(prevController).append(nextController);
				};
				function updateButtonPosition(height, width, speed) {
					var pos = parseInt((height/2));
					prevController.animate({ "top": pos + "px"}, speed);
					nextController.animate({ "top": pos + "px", "right" : that.css("paddingRight")}, speed);
				};
			});
		}
	});
})(jQuery);

Problemet egentligen är att jag inte får löst det med knapparna previous och next - dvs att de inte är med som standard utan något som jag själv kan styra under divven.

det är ju bara att ändra:
that.append(prevController).append(nextController);

om du inte vill appendar den in i "that", du kan ju lägga den utanför "that"

och plocka bort:

function updateButtonPosition(height, width, speed) {
                    var pos = parseInt((height/2));
                    prevController.animate({ "top": pos + "px"}, speed);
                    nextController.animate({ "top": pos + "px", "right" : that.css("paddingRight")}, speed);
                };

och där den körs.

Annars är nivoslider en poppis slider, som jag har bidragit med lite kod till. (shameless plug)

http://nivo.dev7studios.com/

Voigt: Kanon! Fick till det, får se om jag nöjer mig med detta ;)

Colione: Nivoslidern är riktigt bra men inte riktigt uppbyggd så som jag vill ha det. Jag vill kunna styra innehållet med en framåt och bakåtknapp själv.

Det kan du visst, läser du dokumentationen och konfigurationsparametrarna ser du att du kan konfigurera den så.