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>
