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

Question

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>

To begin with, this code doesn't even do what I think you want. After playing with various options (see fiddles http://jsfiddle.net/morrison/m8AFG/1/ through http://jsfiddle.net/morrison/m8AFG/4/), I could not get your code to have two slideshows and switch between them. — Levi Morrison, Jun 16 '11 at 17:27
Hi, sorry about that I had a look at your links. I have updated the code in my question from snippets to the entire page which should work. — James Mason, Jun 16 '11 at 18:15

score 2 · Answer 1 · answered Jan 16 '12 at 03:23

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

score 0 · Answer 2 · answered Jun 16 '11 at 17:01

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

So looking at the options page the option 'after:' looks like it will allow you to add the above code to your page, make sense? — Tom Walters, Jun 16 '11 at 17:17
Hi Tom, thanks yes makes sense. I should have looked at the 'after' option more closely. I didn't notice that instead of passing a predefined value, you could also write functions for it. — James Mason, Jun 16 '11 at 18:23

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

2 Answers2

Linked