Thanks Mike & Charlie,
It appears that I have the whole shebang working now. All the best to
you both.
Thanks,
On Dec 24, 1:33 pm, Charlie <charlie...@gmail.com> wrote:
> for the arrows you can create absolute positioned containers over top of the
> slides that fadeIn, show or whatever when hover over slide.
> use the "next" and "prev" options to assign selector to your arrows within
> the overlay containers
> $("mySlideContainer").cycle({
> //other options already used
> next: '# myNextArrow',
> prev: ''# myPrevArrow'
> });
> pmAgony 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.phpThanks! 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>
