jquery cycle plugin, nested slideshow, 'after' option or testing for first and last image

In my nested slideshows I have 'prev' and 'next' controls. I would like to be able to reduce the css opacity of 'prev' if you are on the first slide and 'next' if you are on the last slide.

The 'after: onAfter' option would have been sufficient but it didn't appear to work when placed in my code for the nested slideshow controls.

Is there a way to implement 'after' correctly in a nested slideshow, or alternatively test for first and last images in the nested slideshow? Thankyou

Here is my code.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {                     
// init and stop the inner slideshows
var inners = $('.inner-slideshow').cycle().cycle('stop');
var slideshow = $('#slideshow').cycle({
    fx:     'fade',
    speed:  'fast',
    timeout: 0,
    pager:  '#nav',
    pagerAnchorBuilder: function(idx, slide) {
        // return sel string for existing anchor
        return '#nav li:eq(' + (idx) + ') a';
    },
    before: function() {
        // stop all inner slideshows
        inners.cycle('stop');
        // start the new slide's slideshow
        $(this).cycle({
            fx: 'scrollHorz',
            speed:  'fast',
            timeout: 0,
            prev: '#prev',
            next: '#next',
            nowrap:  1
        });
    }
});
});
</script>
<title>dev</title>
</head>
<body>
<ul id="nav">
<li><a href="#">Top Slidehsow 1</a></li>
<li><a href="#">Top Slidehsow 2</a></li>
</ul>
<div id="controls">
    <a id="prev" href="#">&lt; Prev</a>
    <a id="next" href="#">Next &gt;</a>
</div>
<div id="slideshow">
    <div class="inner-slideshow">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200">
    </div>
    <div class="inner-slideshow">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" width="200" height="200">
    </div>
</div>
</body>
</html>

I think this is what you wanted (edited your example): http://jsfiddle.net/m8AFG/18/

$(document).ready(function() {
    // init and stop the inner slideshows
    var inners = $('.inner-slideshow').cycle().cycle('stop');
    var slideshow = $('#slideshow').cycle({
        fx: 'fade',
        speed: 'fast',
        timeout: 0,
        pager: '#nav',
        pagerAnchorBuilder: function(idx, slide) {
            // return sel string for existing anchor
            return '#nav li:eq(' + (idx) + ') a';
        },
        before: function() {
            // stop all inner slideshows
            inners.cycle('stop');
            // start the new slide's slideshow
            $(this).cycle({
                fx: 'scrollHorz',
                speed: 'fast',
                timeout: 0,
                prev: '#prev',
                next: '#next',
                nowrap: 1,
                after: function() {
                    $('#prev').removeClass('opac');
                    $('#next').removeClass('opac');
                    var countImg = $(this).siblings().size();
                    if ($(this).index() == 0) $('#prev').addClass('opac');
                    if ($(this).index() == countImg) $('#next').addClass('opac');
                }
            });
        }
    });
});

added css opacity and the jquery and cycle script link, and it works fine

Greetings, Michael

It would be helpful to know what plugin you are using, but most slider plugins have a parameter that you can add a function to, that will be called every time the actual sliding happens, something like 'onChange'. If this plugin has such a feature you could use some simple Javascript to either directly manipulate the CSS or the elements, or add a class to them to allow you to manipulate them in your CSS.

So you would need to know the current index - looks like 'idx' might provide that, and then you would do something like (pseudo code)

if(currentSlideNumber == slides.length){ 
    //Reduce opacity of next tab
}else if(currentSlideNumber == 1){
    //Reduce opacity of previous tab
}

Where 'currentSlideNumber' is the current index, and slides.length counts the number of slides - in Javascript that would be:

$('.inner-slideshow').children('img').length

来源：https://stackoverflow.com/questions/6375667/jquery-cycle-plugin-nested-slideshow-after-option-or-testing-for-first-and-l

标签

jquery

plugins

jquery-plugins

cycle

jquery-cycle