Nested jQuery Cycle slideshows: Why is my thumbnail navigation breaking? -
here my example.
i have created portfolio, using fancybox launch lightbox containing nested cycle slideshows. thumbnail navigation works fine on first slideshow, when click link (heroes children) second slideshow, breaks. html same, not sure going on here. i've reworked 3 times, searched remedy, have hard time finding many examples of nested cycle slideshows thumbnail navigation. able find solution different problem having, here on stack overflow, figured place seek help.
any idea of what's going wrong here?
here's javascript:
<!-- lightbox javascript --> <script type="text/javascript"> $(document).ready(function() { function formattitle(title, currentarray, currentindex, currentopts) { return '<div id="project-title">' + (title) + '</div>'; } $(".work-thumb").fancybox({ 'titleposition' : 'inside', 'transitionin' : 'elastic', 'transitionout' : 'elastic', 'titleformat' : formattitle }); }); </script> <!-- outer slider javascript --> <script type="text/javascript"> $(document).ready(function() { $('#outer-slider').cycle({ fx: 'scrollup', timeout: 0, delay: -2000, pager: '#outer-slider-nav', pageranchorbuilder: function(idx, slide) { // return sel string existing anchor return '#outer-slider-nav li:eq(' + (idx) + ') a'; } }); }); </script> <!-- inner slider javascript --> <script type="text/javascript"> $(document).ready(function() { $('.inner-slider').cycle({ fx: 'scrollleft', timeout: 6000, pause: 1, pager: '.inner-slider-nav', nowrap: false, pageranchorbuilder: function(idx, slide) { // return sel string existing anchor return '.inner-slider-nav li:eq(' + (idx) + ') a'; } }); }); </script> and here's html:
<div id="content"> <a class="work-thumb" href="#lightbox-window" title="viewpoint bank"><img src="images/viewpoint1_thumb.jpg" alt="viewpoint bank" width="100" height="60" /></a> <div style="display: none;"> <div id="333" style="width:620px;height:519px;"> <div id="outer-slider"> <div> <div class="project"> <div class="inner-slider"> <div class="inner-slide"> <img src="images/viewpoint1_large.jpg" alt="viewpoint bank" width="620" height="375" /> </div> <div class="inner-slide"> <img src="images/viewpoint2_large.jpg" alt="viewpoint bank" width="620" height="375" /> </div> <div class="inner-slide"> <img src="images/viewpoint3_large.jpg" alt="viewpoint bank" width="620" height="375" /> </div> </div><!-- inner-slider --> <ul class="inner-slider-nav"> <li><a href="#"><img src="images/viewpoint1_thumb.jpg" alt="viewpoint bank" width="100" height="60" /></a></li> <li><a href="#"><img src="images/viewpoint2_thumb.jpg" alt="viewpoint bank" width="100" height="60" /></a></li> <li><a href="#"><img src="images/viewpoint3_thumb.jpg" alt="viewpoint bank" width="100" height="60" /></a></li> </ul> </div><!-- #viewpoint1 --> </div> <div> <div class="project"> <div class="inner-slider"> <div class="inner-slide"> <img src="images/heroesforchildren1_large.jpg" alt="heroes children" width="620" height="375" /> </div> <div class="inner-slide"> <img src="images/heroesforchildren2_large.jpg" alt="heroes children" width="620" height="375" /> </div> <div class="inner-slide"> <img src="images/heroesforchildren3_large.jpg" alt="heroes children" width="620" height="375" /> </div> </div><!-- inner-slider --> <ul class="inner-slider-nav"> <li><a href="#"><img src="images/heroesforchildren1_thumb.jpg" alt="heroes children" width="100" height="60" /></a></li> <li><a href="#"><img src="images/heroesforchildren2_thumb.jpg" alt="heroes children" width="100" height="60" /></a></li> <li><a href="#"><img src="images/heroesforchildren3_thumb.jpg" alt="heroes children" width="100" height="60" /></a></li> </ul> </div><!-- #viewpoint2 --> </div> </div><!-- #outer-slider --> <ul id="outer-slider-nav"> <li><a href="#">viewpoint bank</a></li> <li><a href="#">heroes children</a></li> </ul> </div><!-- #lightbox-window --> </div><!-- end display none --> </div><!-- #content -->
i think must extend function inner sliders each(function(){})
$(document).ready(function() { $('.inner-slider').each.function() { var el = $(this); var thispager = el.next('ul.inner-slider-nav'); /* or try instead */ /* var thispager = el.parents('div:eq(0)').children('ul.inner-slider-nav');*/ /* should work both */ el.cycle({ fx: 'scrollleft', timeout: 6000, pause: 1, pager: thispager, /* <-- changed */ nowrap: false, pageranchorbuilder: function(idx, slide) { // return sel string existing anchor return thispager + ' li:eq(' + (idx) + ') a'; } }); }); }); the reason of is, call element using class separator, and, mind script, have 2 of them. 1 shall javascript use ? uses first one. code not tested @ moment, on right track now.
the same on actual project (currently under construction) http://ferienhaus-fischland-ahrenshoop.de/mini4/ (may later have remove "mini4/" when project finished) in case neede cycle gallery working, if used more once per page, worked out 1 script , using classes instead of ids.
Comments
Post a Comment