Two pagers, one slideshow: http://jquery.malsup.com/cycle/pager-two.html
Mike On Dec 24, 8:54 am, pmAgony <fnc...@gmail.com> wrote: > Update, I was able to successfully complete #2 and #3. My challenge > right now is being able to get two synchronized pagers on the same > cycle. > > If anyone can chime in to assist, I'd greatly appreciate it. Here's a > link to take a look:http://www.cuisinteractive.com/staging/etc/index.php > > Thanks! > > On Dec 23, 11:41 am, pmAgony <fnc...@gmail.com> wrote: > > > > > Hello Experts, > > > I'm looking for some guidance on implementing multiple pagers on a > > jQuery Cycle plugin. My goal is as follows: > > > 1. On hover of #slideshow, reveal left and right arrows so the user > > can navigate previous/next. Exactly like the lightbox feature. > > > 2. Thumbnails of the images below the slideshow to allow the user to > > navigate visually and identify which image they are currently on. > > This is completed and successful. > > > 3. In the lower-left region of the slideshow, I'd like to show text > > description of the image iteself. It should be synchronized with the > > slideshow. This isn't really a paging question. > > > So to recap, the user will have two methods of paging, one on the > > slideshow when they hover, the other via the thumbnails, and lastly a > > text description of each slide in the lower-left quadrant of the mast. > > > I'm not sure how to define 2 different pagers. Any help or reference > > to an existing/working model would be great. All the best! > > > Here is my current code: > > > ######### > > xHTML > > ######### > > <div id="mast"> > > > <div class="slideshow"> > > <!-- Would like for these controls to appear on mouseOver --> > > <div class="pager" style="display:none;"> > > <span id="controlLeft"><a href="#" class="pref" > > title="Previous"><!-- Hi --></a></span> > > <span id="controlRight"><a href="#" class="next" > > title="Next"><!-- Hi --></a></span> > > </div> > > > <!-- The slideshow itself --> > > <div id="slides"> > > <a href="#"><img src="images/mast/automated_controls.jpg" > > width="1000" height="421" alt="Automated Controls"></a> > > <a href="#"><img src="images/mast/bedroom_theater.jpg" > > width="1000" height="421" alt="Bedroom Theater"></a> > > <a href="#"><img src="images/mast/home_theater.jpg" width="1000" > > height="421" alt="Home Theater"></a> > > <a href="#"><img src="images/mast/home_theater2.jpg" > > width="1000" height="421" alt="Home Theater"></a> > > <a href="#"><img src="images/mast/surveillance.jpg" width="1000" > > height="421" alt="Home Surveillance"></a> > > <a href="#"><img src="images/mast/automated_controls2.jpg" > > width="1000" height="421" alt="Automated Controls"></a> > > <a href="#"><img src="images/mast/touch_sensor.jpg" width="1000" > > height="421" alt="Touch Sensor Controls"></a> > > <a href="#"><img src="images/mast/touch_control.jpg" > > width="1000" height="421" alt="Touch Control"></a> > > </div> > > </div> > > > <!-- Predula of thumbnails --> > > <div id="predula"> > > <ul id="nav"> > > <li><a href="#"><img src="images/mast/thumb_1.png" width="44" > > height="44" alt="Automated Controls" /></a></li> > > <li><a href="#"><img src="images/mast/thumb_2.png" width="44" > > height="44" alt="Bedroom Theater" /></a></li> > > <li><a href="#"><img src="images/mast/thumb_3.png" width="44" > > height="44" alt="Home Theater" /></a></li> > > <li><a href="#"><img src="images/mast/thumb_4.png" width="44" > > height="44" alt="Home Theater" /></a></li> > > <li><a href="#"><img src="images/mast/thumb_5.png" width="44" > > height="44" alt="Home Surveillance" /></a></li> > > <li><a href="#"><img src="images/mast/thumb_6.png" width="44" > > height="44" alt="Automated Controls" /></a></li> > > <li><a href="#"><img src="images/mast/thumb_7.png" width="44" > > height="44" alt="Touch Sensor Controls" /></a></li> > > <li><a href="#"><img src="images/mast/thumb_8.png" width="44" > > height="44" alt="Touch Control" /></a></li> > > </ul> > > <br class="clear" /> > > </div> > > > <!-- The text-friendly description that transitions with each slide > > transition --> > > <div id="description"></div> > > > </div><!-- #mast --> > > > ######### > > JavaScript > > ######### > > > <script type="text/javascript"> > > // redefine Cycle's updateActivePagerLink function > > $.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) { > > $(pager).find('li').removeClass('activeLI') > > .filter('li:eq('+currSlideIndex+')').addClass('activeLI'); > > > }; > > > $(document).ready(function() { > > $('#slides').cycle({ > > fx: 'scrollLeft', // choose your transition type, ex: > > fade, > > scrollUp, shuffle, etc... > > speed: 4500, // milliseconds between each slide > > transition > > timeout: 6000, // milliseconds between slide > > transitions (0 to > > disable auto advance) > > pause: true, // pause on mouseover > > resume: true, > > delay: 1500, // delay start onload > > cleartype: 1, > > easing: null, // easing method for both in and out > > transitions > > easeIn: null, // easing for "in" transition > > easeOut: null, // easing for "out" transition > > pager: '#nav', > > prev: 'a.prev', > > next: 'a.next', > > pagerAnchorBuilder: function(idx, scrollLeft) { > > // return selector string for existing anchor > > return '#nav li:eq(' + idx + ') a'; > > } > > });}); > > > function pagerFactory(idx, scrollLeft) { > > var s = idx > 2 ? ' style="display:none"' : ''; > > return '<li'+s+'><a href="#">'+(idx+1)+'</a></li>'; > > }; > > > </script>
