[jQuery] Re: jQuery Cycle Multiple Pagers

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>