Search code examples
javascriptjqueryanimationslideshowcaption

Change the way the "caption" animates on this jQuery Image Slideshow


I found this great jQuery slideshow: http://slidesjs.com/examples/images-with-captions/

However, I'd like it so the "caption" area doesn't disappear and reveal for each image. I'd prefer if it just changes the text depending on the new image.

Is this possible, and if so, how do I achieve this?

For reference, here is the file: slides.min.jquery.js ( http://slidesjs.com/examples/images-with-captions/js/slides.min.jquery.js )

And here is a snippet of the JavaScript code being used:

animationStart: function(current){
                    $('.caption').animate({
                        bottom:-35
                    },100);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationStart on slide: ', current);
                    };
                },
                animationComplete: function(current){
                    $('.caption').animate({
                        bottom:0
                    },200);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationComplete on slide: ', current);
                    };
                },
                slidesLoaded: function() {
                    $('.caption').animate({
                        bottom:0
                    },200);
                }

Many thanks for any pointers.


Solution

  • animationStart: function(current){
                        if (window.console && console.log) {
                            // example return of current slide number
                            console.log('animationStart on slide: ', current);
                        };
                    },
                    animationComplete: function(current){
                        $('.caption').animate({
                            bottom:0
                        },200);
                        if (window.console && console.log) {
                            // example return of current slide number
                            console.log('animationComplete on slide: ', current);
                        };
                    },
                    slidesLoaded: function() {
                        $('.caption').animate({
                            bottom:0
                        },200);
                    }
    

    Worked on the example-page.

    |EDIT| 100% working example here: http://jsfiddle.net/byvd9/1/