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>
No comments:
Post a Comment