silfverMedlem sedan apr. 200312 679 inlägg Har rotat runt lite efter en vettig slider men som vanligt får man en miljon träffar och alla ser olika ut. Det känns som det borde finnas jäkligt enkla lösningar där ute.
Har hittat denna:
http://css-tricks.com/examples/SimpleSlideshow/#
Den är väl närmst det jag vill ha egentligen.
Jag vill automatscrolla mellan divar, med valfritt innehåll, dock alltid lika stora. Ungefär fem stycken kommer det bli. Egentligen hade jag velat ha olika tid på varje.
Nån som har några bra på lager? Jag är alltså inte ute efter en bild-slider som google översvämmas av utan en enkel div-slider. :)
Danne VMedlem sedan aug. 20068 090 inlägg silfverMedlem sedan apr. 200312 679 inlägg
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.
jmeMedlem sedan maj 20012 237 inlägg silfverMedlem sedan apr. 200312 679 inlägg
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.
silfverMedlem sedan apr. 200312 679 inlägg
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 ;)
silfverMedlem sedan apr. 200312 679 inlägg
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
oskarsMedlem sedan nov. 20051 317 inlägg Sök på "Orbit". Den bästa jag testat!
oskarsMedlem sedan nov. 20051 317 inlägg silfver, told you! :D Bästa hittills!
Men vad jag ser så kan du inte ställa in individuella timers på bilderna? eller?
silfverMedlem sedan apr. 200312 679 inlägg 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;
}();
silfverMedlem sedan apr. 200312 679 inlägg
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).
silfverMedlem sedan apr. 200312 679 inlägg
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.
