0

全て。私が取り組んでいるプロジェクト用にフルスクリーンのjQueryギャラリーを構築していますが、小さな問題が発生しています。

何が起こっているかのデモを見るには、http: //www.idealbrandon.com/gallery.html にアクセスしてください。

基本的に、カスタム属性 data-background を使用して各スライドの bg-image をロードしています。これは最初は問題なく機能しますが、スライドが 2 回目に読み込まれると読み込まれません。スライドの HTML は次のとおりです。

<div class="slide" data-background="/img/gallery/2.jpg">
    <div class="location">Magical Aqua Ducks</div>
    <div class="verse"></div>
</div>

問題のJavascriptは

for(var i = 0; i < totalSlides; i++){
    $pagerList
    .append('<li class="page" data-target="'+i+'"></li>');
        if ($slides.eq(i).attr("data-background") != null){
            $slides.eq(i).css("background-image", "url("+$slides.eq(i).attr("data-background")+")");
    };
};

そしてJavaScriptファイル全体は

(function($){
function prefix(el){
    var prefixes = ["Webkit", "Moz", "O", "ms"];
    for (var i = 0; i < prefixes.length; i++){
        if (prefixes[i] + "Transition" in el.style){
            return '-'+prefixes[i].toLowerCase()+'-'; 
        };
    }; 
    return "transition" in el.style ? "" : false;
};
var methods = {
    init: function(settings){
        return this.each(function(){
            var config = {
                slideDur: 7000,
                fadeDur: 800
            };
            if(settings){
                $.extend(config, settings);
            };
            this.config = config;
            var $container = $(this),
                slideSelector = '.slide',
                fading = false,
                slideTimer,
                activeSlide,
                newSlide,
                $slides = $container.find(slideSelector),
                totalSlides = $slides.length,
                $pagerList = $container.find('.pager_list');
                prefix = prefix($container[0]);

            function animateSlides(activeNdx, newNdx){
                function cleanUp(){
                    $slides.eq(activeNdx).removeAttr('style');
                    activeSlide = newNdx;
                    fading = false;
                    waitForNext();
                };                    

                if(fading || activeNdx == newNdx){
                    return false;
                };
                fading = true;
                $pagers.removeClass('active').eq(newSlide).addClass('active');
                $slides.eq(activeNdx).css('z-index', 3);
                $slides.eq(newNdx).css({
                    'z-index': 2,
                    'opacity': 1
                });

               if(!prefix){
                    $slides.eq(activeNdx).animate({'opacity': 0}, config.fadeDur,
                    function(){
                        cleanUp();
                    });
                } else {
                    var styles = {};
                    styles[prefix+'transition'] = 'opacity '+config.fadeDur+'ms';
                    styles['opacity'] = 0;
                    $slides.eq(activeNdx).css(styles);
                    //$slides.eq(activeNdx).css("background-image", "url("+$slides.eq(activeNdx).attr("data-background")+")");

                    var fadeTimer = setTimeout(function(){
                        cleanUp();
                    },config.fadeDur);
                };
            };
            function changeSlides(target){
                if(target == 'next'){
                    newSlide = (activeSlide * 1) + 1;
                    if(newSlide > totalSlides - 1){
                        newSlide = 0;
                    }
                } else if(target == 'prev'){
                    newSlide = activeSlide - 1;
                    if(newSlide < 0){
                        newSlide = totalSlides - 1;
                    };
                } else {
                    newSlide = target;
                };
                animateSlides(activeSlide, newSlide);
            };
            function waitForNext(){
                slideTimer = setTimeout(function(){
                    changeSlides('next');
                },config.slideDur);
            };
            for(var i = 0; i < totalSlides; i++){
                $pagerList
                    .append('<li class="page" data-target="'+i+'"></li>');
                if ($slides.eq(i).attr("data-background") != null){
                    $slides.eq(i).css("background-image", "url("+$slides.eq(i).attr("data-background")+")");
                    //alert($slides.eq(i).attr("data-background"));
                };
            };
            $container.find('.page').bind('click',function(){
                var target = $(this).attr('data-target');
                clearTimeout(slideTimer);
                changeSlides(target);
            });
            var $pagers = $pagerList.find('.page');
            $slides.eq(0).css('opacity', 1);



            $pagers.eq(0).addClass('active');
            activeSlide = 0;

            waitForNext();
        });
    }
};
$.fn.easyFader = function(settings){
      return methods.init.apply(this, arguments);
};
})(jQuery);

前もって感謝します

4

1 に答える 1

0

gallery.js ファイルを見ると、フェード トランジションで呼び出される次の関数があります。 cleanUp()

この関数では、style 属性を から削除します$slides。

$slides.eq(activeNdx).removeAttr('style');

background-image スタイルも削除しています。これが再び設定されることはありません。

スタイルを削除する上記の行の後に、以下を含めることができます。

$slides.eq(activeNdx).css("background-image", "url("+$slides.eq(activeNdx).data("background")+")");
于 2013-10-07T15:34:35.160 に答える