0

I've began skinning, configuring and implementing the anythingSlider into a jsFiddle project and I noticed that once I implemented the thumbnail/slider system, my captions are no longer animating on transition/load. The jQuery may be conflicting with each other in the javaScript box.

You can check out the fiddle here: http://jsfiddle.net/jodriscoll/fKCFE/.

In theory, the caption should slide in from under the image and display itself onLoad of the slide/transition from one slide to another.

Here is an example of it working the way I would prefer: http://jsfiddle.net/jodriscoll/fKCFE/51/

// caption toggle animation time
var toggleTime = 500,
// always show caption when slide comes into view
showCaptionInitially = true,

updateCaption = function(slider, init) {
    if (init && showCaptionInitially) {
        setTimeout(function() {
            slider.$targetPage.find('.caption').animate({
                bottom: 0
            }, toggleTime);
        }, slider.options.delayBeforeAnimate + toggleTime);
    } else if (!init) {
        var cap = slider.$lastPage.find('.caption');
        cap.css('bottom', -cap.innerHeight());
    }
};

$('#slider').anythingSlider({
//  buildNavigation : false,
// *********** Callbacks ***********
// Callback when the plugin finished initializing
onInitialized: function(e, slider) {
    slider.$items.each(function() {
        var cap = $(this).find('.caption');
        cap.css('bottom', -cap.innerHeight()).click(function() {
            cap.animate({
                bottom: (cap.css('bottom') === "0px" ? -cap.innerHeight() : 0)
            }, toggleTime);
        });
    });
    updateCaption(slider, true);
},

// Callback before slide animates
onSlideBegin: function(e, slider) {
    updateCaption(slider, true);
},

// Callback after slide animates
onSlideComplete: function(slider) {
    updateCaption(slider, false);
}
});

1 Answer 1

1

The problem was that that slider was being initialized twice. Any code in the second instance is ignored. Here is an updated demo with code combined from both.

// ******************
// Thumnail Slider
// ******************
var fadeTime = 0,
    fadeDelay = 0,
    timer,
    hideControls = function (slider) {
        clearTimeout(timer);
        setTimeout(function () {
            slider.$controls.fadeOut(fadeTime);
            $('.tooltip').fadeOut(fadeTime);
        }, fadeDelay);
    },
    // ******************
    // Caption animation
    // ******************
    toggleTime = 500,
    showCaptionInitially = true,
    updateCaption = function (slider, init) {
        if (init && showCaptionInitially) {
            setTimeout(function () {
                slider.$targetPage.find('.caption').animate({
                    bottom: 0
                }, toggleTime);
            }, slider.options.delayBeforeAnimate + toggleTime);
        } else if (!init) {
            var cap = slider.$lastPage.find('.caption');
            cap.css('bottom', -cap.innerHeight());
        }
    };

$('#slider').anythingSlider({
    navigationSize: 3,
    navigationFormatter: function (i, panel) {
        var url = 'http://www.massgeneral.org/international/dev/assets/slideshow/slideshow-',
            thumbs = [
                ['01', 'This is the tooltip for the first thumbnail'],
                ['02', 'This is the tooltip for the second thumbnail'],
                ['03', 'This is the tooltip for the third thumbnail'],
                ['04', 'This is the tooltip for the fourth thumbnail'],
                ['05', 'This is the tooltip for the fifth thumbnail'], ];
        return '<img title="' + thumbs[i - 1][1] + '" src="' + url + thumbs[i - 1][0] + '.jpg">';
    },
    onInitialized: function (e, slider) {
        slider.$items.each(function () {
            var cap = $(this).find('.caption');
            cap.css('bottom', -cap.innerHeight()).click(function () {
                cap.animate({
                    bottom: (cap.css('bottom') === "0px" ? -cap.innerHeight() : 0)
                }, toggleTime);
            });
        });
        updateCaption(slider, true);
        slider.$controls.find('img').tooltip();
    },
    onSlideBegin: function (e, slider) {
        updateCaption(slider, true);
    },
    onSlideComplete: function (slider) {
        updateCaption(slider, false);
    }
});
3
  • Mottie, thanks for responding! I greatly appreciate your hard work on the AnythingSlider!
    – Joey O
    Mar 15, 2013 at 13:41
  • Would it be possible to check out a couple more questions I had about your slider on your github -or- do you want me to post the questions on stackoverflow instead?
    – Joey O
    Mar 15, 2013 at 13:42
  • Well, I'd like to think that github issues are for bug and enhancement requests. So here is fine, or even better in the css-tricks forums.
    – Mottie
    Mar 15, 2013 at 15:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.