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>
