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.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=""
width="1000" height="421" alt="Automated Controls"></a>
<a href=""><img src=""
width="1000" height="421" alt="Bedroom Theater"></a>
<a href=""><img src="" width="1000"
height="421" alt="Home Theater"></a>
<a href=""><img src=""
width="1000" height="421" alt="Home Theater"></a>
<a href=""><img src="" width="1000"
height="421" alt="Home Surveillance"></a>
<a href=""><img src=""
width="1000" height="421" alt="Automated Controls"></a>
<a href=""><img src="" width="1000"
height="421" alt="Touch Sensor Controls"></a>
<a href=""><img src=""
width="1000" height="421" alt="Touch Control"></a>
</div>
</div>
<!-- Predula of thumbnails -->
<div id="predula">
<ul id="nav">
<li><a href=""><img src="" width="44"
height="44" alt="Automated Controls" /></a></li>
<li><a href=""><img src="" width="44"
height="44" alt="Bedroom Theater" /></a></li>
<li><a href=""><img src="" width="44"
height="44" alt="Home Theater" /></a></li>
<li><a href=""><img src="" width="44"
height="44" alt="Home Theater" /></a></li>
<li><a href=""><img src="" width="44"
height="44" alt="Home Surveillance" /></a></li>
<li><a href=""><img src="" width="44"
height="44" alt="Automated Controls" /></a></li>
<li><a href=""><img src="" width="44"
height="44" alt="Touch Sensor Controls" /></a></li>
<li><a href=""><img src="" 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>
|
