12 svar · 1 697 visningar · startad av bikic
Hej!
Jag har en funktion på min sida där man kan klicka fram olika objekt, varje objekt har en slidefunktion innehållande bilder. Denna slide fungerar som jag vill ha det men jag får bara inte till pagerfunktionen, som bygger på en class som alla slides använder sig av. Koden för slidern och pagern ser ut så här:
$("div[id^=itemSlide]").each(function(index) {
$("#itemSlide" + (index+1)).cycle({
fx: 'fade',
speed: '1000',
timeout: 0,
pager:'.explore-item-nav div',
cleartype: true,
cleartypeNoBg: true,
pagerAnchorBuilder: function(index, el) {
return '<a href="#"></a>';
}
});
});
Min tanke var att göra pagern unik på något sätt, men det fungerade inte heller, testade med detta:
pager:'#item" + (index+1) + " .explore-item-nav div',
Någon som har någon annan bra idé på hur man kan få pagern att vara just unik för det öppnade objektet? (index+1) är förövrigt ID-numret på objektet du öppnar.
Var är .explore-item-nav div i förhållande med #itemSlideXX ?
En annan sak med är att du behöver inte leta upp #itemSlide + index eftersom loopar ut kollektionen redan med alla #itemSlide_____ räcker att du kör this istället för att leta upp den igen i DOM:en, det har du redan gjort en gång.
itemSlide1 är namnet på själva slidern. explore-item-nav är namnet på pagern.
Är inte alls med på vad du menar med att jag inte behöver leta upp itemslide.
$("div[id^=itemSlide]")
Där letar du ju upp alla itemSlide__ i hela dokumentet, sen gör du samma sak igen med:
$("#itemSlide" + (index+1))
Vilket känns lite onödigt eftersom du redan har kollektionen av alla itemSlideXXXX
collection.each(function(index) {
var item = this
})
this refera till den specifika itemSlideXXX som den gör för varje item i collektionen
Enligt dokumentationen:
pager: null, // element, jQuery object, or jQuery selector string for the element to use as pager container
Om man kollar din HTML (om det är ndesign som jag gissar)
<div id="item1" class="explore-item">
<div class="explore-item-wrapper">
<div class="explore-item-load-slides"></div>
<div id="itemSlide1" class="explore-item-slides">
<img src="uploads/jl-slides-01.jpg">
<img src="uploads/jl-slides-02.jpg">
</div>
<div class="portfolio-nav">
<a class="portfolio-nav-prev" href="#">prev</a>
<div class="explore-item-close" onclick="closeItem('1'); return false;">Close</div>
<a class="portfolio-nav-next" href="#">next</a>
</div>
</div>
</div>
Det känns lite galet, för den ända diven du har där är ju close diven och dess CSS är spontant omöjlig att få till om du skall få pagnerings text in i den (text indent osv), vilket element skall ha pagneringen egentligen?
Hej!
Det är korrekt med ndesign, men den versionen du ser där är inte den som gäller för detta jag postat idag. Kolla här:
<div id="item1" class="explore-item">
<div class="explore-item-nav"><div></div></div>
<div class="itemInfo">
<div class="explore-item-close" onclick="closeItem('1'); return false;">Close</div>
<h4 class="FontBold">Jansson & Lunden</h4>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
</div>
<div class="grid-44 load-slides last">
<div id="itemSlide1" class="explore-item-slides">
<img src="uploads/jl-slides-01.jpg">
</div>
</div>
</div>
Vad som händer är att den inte bygger upp den unika pagern för varje slide. Har en slide 4 bilder så visar fyra i pagern, även på de slides som endast har 1 eller 2 bilder.
Här är det skumma!
Vad händer när du kör den på sidan, skapas något i din explore-item-nav div ?
Ja, pagern skapas.
Låt oss säga att jag har fyra slides totalt, där tre slides innehåller två bilder och den fjärde innehåller 5 bilder.
Vad som händer här är att pagern visar 5 länkar på varje slide, där de tre sista blir tomma. Detta beror troligen på att man inte bygger upp en unik pager för varje slide. Därav mitt försök om att göra den unik.
pager:'#item" + (index+1) + " .explore-item-nav div',
borde göra det (fast du borde nog vara försiktig med att sätta den på div som du gör, för om du lägger in fler än en div så kommer den lägga in en pager på alla dina div:ar
Grejen är den att det inte fungerar så här, vilket jag tycker att det borde göra. Men sätter jag exempelvis en 1 iställlet för (index+1), dvs pager:'#item1 .explore-item-nav div', så fungerar första slidern.
Det finns bara en div inom explore-item-nav, så det är lugnt.
Inga fler tips?
Du kan ju alltid börja debugar din kod kolla i firebug med console.log och kolla vad du få ut i dina koder.
Ett test:
$("div[id^=itemSlide]").each(function(index) {
var itemNumber = index+1;
$(this).cycle({
fx: 'fade',
speed: '1000',
timeout: 0,
pager: '.explore-item-nav div',
cleartype: true,
pager: '#item" + itemNumber + " .explore-item-nav div',
cleartypeNoBg: true,
pagerAnchorBuilder: function() {
return '<a href="#"></a>';
}
});
});
kanske fungera bättre
Fungerade inte bättre, tyvärr. Nu har jag kört fast riktigt ordentligt. Vet inte hur jag går vidare nu. Hmm...
en miss av mig, jag har kört " på kod-exemplet men du kör ' (fast är även på första delen i din kod), se till att bygga ihop strängar :)
$("div[id^=itemSlide]").each(function(index) {
var itemNumber = index+1;
$(this).cycle({
fx: 'fade',
speed: '1000',
timeout: 0,
pager: '.explore-item-nav div',
cleartype: true,
pager: '#item' + itemNumber + ' .explore-item-nav div',
cleartypeNoBg: true,
pagerAnchorBuilder: function() {
return '<a href="#"></a>';
}
});
});
bör fungera bättre.