0

スキニング、構成、およびjsFiddleプロジェクトへのanythingSliderの実装を開始しましたが、サムネイル/スライダーシステムを実装すると、キャプションがトランジション/ロード時にアニメーション化されなくなることに気付きました。jQueryはjavaScriptボックスで互いに競合している可能性があります。

ここでフィドルをチェックできます：http：//jsfiddle.net/jodriscoll/fKCFE/。

理論的には、キャプションは画像の下からスライドインし、あるスライドから別のスライドへのスライド/トランジションのロード時に表示される必要があります。

これが私が好む方法で機能する例です：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);
}
});
4

1 に答える 1

1

問題は、そのスライダーが2回初期化されていたことです。2番目のインスタンスのコードはすべて無視されます。これは、両方のコードを組み合わせた更新されたデモです。

// ******************
// 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);
    }
});
于 2013-03-15T01:43:15.470 に答える