jQuery som växlar divar som bildspel

http://css-tricks.com/examples/AnythingSlider/#panel1-6

Danne V skrev:

http://css-tricks.com/examples/AnythingSlider/#panel1-6

Där hittade du en lite mer avancerad slider från samma kille. Egentligen som inte har fler funktioner som jag har nytta av. Vill kunna tidsbestämma varje slide ocskå. :)

Just nu kör jag denna:

$(function() {

	$("#slideshow > div:gt(0)").hide();

	setInterval(function() { 
	  $('#slideshow > div:first')
		.fadeOut(1500)
		.next()
		.fadeIn(1500)
		.end()
		.appendTo('#slideshow');
	},  3500);
	
});

Kan man på något vis sätta ett attribut på diven, t.ex. en class som innehåller antalet millisekunder just den sliden skall visas? Så man får ett lite mer dynamiskt flöde.

Eller om man på något vis kan göra så här:

$("#slideshow > div(2)").setInterval(500);
$("#slideshow > div(4)").setInterval(250);

Förstår ni mitt tänk? :)

bygg vidare på det, sätt data objekt på hur länge ett element skall visas och hur snabb den skall vara på att försvinna (animeringen). Du har ju en bra grund redan.

Gjorde ett exempel på tid innan nästa bild skall visas: http://voigt.se/sandbox/wf/sliders/ använder bilder ifrån dig silfver om det var OK.

Jag gillar denna personligen:

http://flowplayer.org/tools/demos/scrollable/gallery.html

voigtann1 skrev:

bygg vidare på det, sätt data objekt på hur länge ett element skall visas och hur snabb den skall vara på att försvinna (animeringen). Du har ju en bra grund redan.

Gjorde ett exempel på tid innan nästa bild skall visas: http://voigt.se/sandbox/wf/sliders/ använder bilder ifrån dig silfver om det var OK.

Ja, det är ok. :) Vad fiffigt du löst det. Men hur validerar dina egna attribut egentligen?

data- attributen menar du? det är ett HTML5 attribut så det skall vara OK.

voigtann1 skrev:

data- attributen menar du? det är ett HTML5 attribut så det skall vara OK.

Jag bugar och bockar. Så jäkla snyggt, som vanligt! :birp

Har du tips på litteratur? Du får jättegärna pm:a mig om du har bra webbsidor eller böcker i jquery-ämnet för en rookie som börjar skämmas för att fråga på forum varje gång han behöver hjälp. ;)

Jag började med att läsa dokumentationerna och byggde egna plugins som folk frågade efter ;) sen var det bara google så hittar man ju folk man tycker om och härmar efter ;) vet inte om det finns så många bra böcker (då jag inte har läst någon av dom :P ) Men har för mig Karl Swedbergs bok har fått många positiva ord. Det borde vara en bra bok då Karl är med i jquery teamet ;)

voigtann1 skrev:

Jag började med att läsa dokumentationerna och byggde egna plugins som folk frågade efter ;) sen var det bara google så hittar man ju folk man tycker om och härmar efter ;) vet inte om det finns så många bra böcker (då jag inte har läst någon av dom :P ) Men har för mig Karl Swedbergs bok har fått många positiva ord. Det borde vara en bra bok då Karl är med i jquery teamet ;)

Sen ska man finna tiden att sätta sig in i det också. Men jag har koll på Swedberg, de har en bra jquery-tutorial site som jag sneglar på. Får läsa ALLT där.

https://www.learningjquery.com

Tack igen! :bire

Sök på "Orbit". Den bästa jag testat!

oskars skrev:

Sök på "Orbit". Den bästa jag testat!

Kickass.

silfver, told you! :D Bästa hittills!

Men vad jag ser så kan du inte ställa in individuella timers på bilderna? eller?

voigtann1: Det fina scriptet du gjorde till mig: http://voigt.se/sandbox/wf/sliders/ det verkar inte kompatibelt med senaste jQuery-versionen. Jag får ett felmeddelande:

TypeError: nextData is null
}, nextData.wait);

Några idéer på varför koden smäller?

		var slider = function() {
			var css = {
				position: "absolute",
				top: 0,
				left: 0
			};
			var slideShow = $("#slideshow").children().filter(":gt(0)").hide().end().css(css).end();
			var doAnimation = function() {
				var data = slideShow.children(":first").data();
				setTimeout(function(trigger) {
					slideShow
						.children(":first")
						.fadeOut(1000)
							.next()
							.fadeIn(1000, trigger)
						.end()
						.appendTo(slideShow);
				}, data.wait, doAnimation);
			};
			doAnimation();
			return doAnimation;
		}();

voigtann1 skrev:

red. tydligen inte ;) återkommer

Jag sitter å pillar här: http://jsbin.com/ufehow/1/edit :)

ny kod uppdaterad, kommer nog en uppdatering om jag fattat bugg rapporter rätt (.find fungera inte i 1.8 ser det ut som).

voigtann1 skrev:

ny kod uppdaterad, kommer nog en uppdatering om jag fattat bugg rapporter rätt (.find fungera inte i 1.8 ser det ut som).

Oj! Jag som trodde jQuery-teamet var felfria! :) Men du löste det snyggt som vanligt!

Är det någon egentlig funktionsskillnad i att använda .children(":first") och .find(":first")?

Förlåt för sent svar. Hade glömt klicka "Skicka svar". :p

children() letar upp direkt barn... men i detta exempel så är det ingen skillnad, find gå djupare i DOM trädet. i detta fall är children en mer korrekt.