사용자 정의 데이터-* 유형, CSS 및 자바 스크립트

모두. 작업중인 프로젝트를 위해 전체 화면 jQuery 갤러리를 구축 중이며 작은 딸꾹질을 겪고 있습니다.

무슨 일이 일어나고 있는지 데모를 보려면 http://www.idealbrandon.com/gallery.html을 방문 하십시오 .

기본적으로 사용자 정의 속성 인 데이터 배경을 사용하여 각 슬라이드에 대한 bg- 이미지를로드합니다. 이것은 처음부터 잘 작동하지만 슬라이드가 두 번째로로드 될 때마다로드되지 않습니다. 슬라이드의 HTML은 다음과 같습니다.

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

문제의 자바 스크립트는

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")+")");
    };
}; 

전체 자바 스크립트 파일은

(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);

미리 감사드립니다