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