0

私が使用しているスライダーはこれです： http： //www.stunicholls.com/gallery/jquery-slide-anything.html

通常のHTMLでは問題なく動作しますが、ajaxでロードされたコンテンツにロードするために配置すると、動作しなくなります。どうすれば修正できますか？

これはスライダーのjsです：

    $(window).load(function(){
    /* just one variable to set-up */

    speed = 600;
    tabColor = '#069';
    tabCurrent = '#09c';

    /* setting the initial state of the slideshow and first image */
    var picVar = $('.iStu12 li.images div.slide div.slidePanel');
    totPic = picVar.length;
    curPicWidth = picVar.eq(0).width();
    curPicHeight = 480;
    totWidth = 0;

    /* calculate the total width of the images and set the div.slide to match */
    $.each((picVar), function() {
    caption=$(this).attr('caption');
    $('.iStu12 li.caption').append('<b>'+caption+'</b>');
    totWidth = totWidth+$(this).width();
    });
    $('ul.iStu12 li.images div.slide').width(totWidth);

    current=0;
    var captionVar = $('.iStu12 li.caption b');
    tabSet ()

    /* resize the containing elements, left/right arrow positions and add the first image caption */
    resize(curPicWidth,curPicHeight)


    /* monitor 'next' clicks */
    $('.iStu12 li.next').click (function() {
        picVar = $('.iStu12 li.images div.slide div.slidePanel');

        /* animate the line of images left one photo - then remove the first image from set, make it the last image then finally move the set to absolute position left:0 */
        curPicWidth = picVar.eq(0).width();
        curPicHeight = 480;
        $('ul.iStu12 li.images div.slide').animate({left:-curPicWidth}, speed, 
            function() {
            $('ul.iStu12 li.images div.slide').find('div.slidePanel:first').remove().appendTo('ul.iStu12 li.images div.slide');
            $('ul.iStu12 li.images div.slide').css('left','0px'); 
        });
        /* get the width, height and alt for the currently displayed image */
        curPicWidth = picVar.eq(1).width();
        curPicHeight = 480;
        /* animate the containing elements and left/right arrow positions to match the current image */
        resize(curPicWidth,curPicHeight)
        current++
        if(current==totPic) {current=0;}
        tabSet ()

    });

    /* monitor 'previous' clicks */
    $('.iStu12 li.prev').click (function() {
        /*  get the last image from the set and make it the fist image, then set the left position of the set to minus the width of the new first image */
        $('ul.iStu12 li.images div.slide').find('div.slidePanel:last').remove().prependTo('ul.iStu12 li.images div.slide');
        picVar = $('.iStu12 li.images div.slide div.slidePanel');

        curPicWidth = picVar.eq(0).width();
        curPicHeight = 480;

        $('ul.iStu12 li.images div.slide').css('left',-curPicWidth); 
        /* animate the first image to left = 0 */
        $('ul.iStu12 li.images div.slide').animate({left:0}, speed);

        /* animate the containing elements, left/right arrow positions to match the current image and change the caption */
        resize(curPicWidth,curPicHeight)
        current--
        if(current==-1) {current=totPic-1;}
        tabSet ()

    });

    /* tab clicking routine */
    $('.iStu12 li.caption b').click (function() {
        clicked = $(this).index()
        /* if to the right of the current tab then slide left */
        if (clicked>current) {
            rotate=clicked-current;
            picVar = $('.iStu12 li.images div.slide div.slidePanel');
            curPicWidth = 0;

            for (var i=0; i<rotate; i++) {
                curPicWidth = curPicWidth+picVar.eq(i).width();
            }
            $('ul.iStu12 li.images div.slide').animate({left:-curPicWidth},{queue:false, duration:speed,  
                complete: function() {
                for (var n=0; n<rotate; n++) {
                $('ul.iStu12 li.images div.slide').find('div.slidePanel:first').remove().appendTo('ul.iStu12 li.images div.slide');
                $('ul.iStu12 li.images div.slide').css('left','0px'); 
                }}
            });

            /* get the width, height and alt for the currently displayed image */
            curPicWidth = picVar.eq(rotate).width();
            curPicHeight = picVar.eq(rotate).height();
            /* animate the containing elements and left/right arrow positions to match the current image */
            resize(curPicWidth,curPicHeight)
            current=clicked;
            tabSet ()
        }
        /* if to the left of the current tab then slide right */
        if (clicked<current) {
            rotate=current-clicked;
            picVar = $('.iStu12 li.images div.slide div.slidePanel');
            curPicWidth = 0;

            for (var i=0; i<rotate; i++) {
                curPicWidth = curPicWidth+picVar.eq(totPic-1).width();
                $('ul.iStu12 li.images div.slide').find('div.slidePanel:last').remove().prependTo('ul.iStu12 li.images div.slide');
            }

            $('ul.iStu12 li.images div.slide').css({left:-curPicWidth, 
                complete: function() {
                /* animate the first image to left = 0 */
                $('ul.iStu12 li.images div.slide').animate({left:0}, speed);
                }
            });
            /* get the width, height and alt for the currently displayed image */
            picVar = $('.iStu12 li.images div.slide div.slidePanel');
            curPicWidth = picVar.eq(0).width();
            curPicHeight = 480;
            /* animate the containing elements and left/right arrow positions to match the current image */
            resize(curPicWidth,curPicHeight)
            current=clicked;
            tabSet ()
        }
    });

    $('.iStu12 li.caption b').mouseover (function() {
        if ($(this).index()!==current) {
            $(this).css('background',tabCurrent);
        }
    }).mouseout(function(){
        if ($(this).index()!==current) {
            $(this).css('background',tabColor);
        }
    });


    function tabSet () {
        captionVar.css('background',tabColor);
        captionVar.eq(current).css('background',tabCurrent);
    }

    /* resize the containing elements, the left/right arrow positions and update the caption */
    function resize (w,h) {
        $('.iStu12').animate({width:w, height:h},speed);
        $('.iStu12 li.images').animate({width:w, height:h},speed);
    }

    });

私はそれをこのようにロードしています：

    <script type="text/javascript" src="js/loader.js"></script>
    <script type="text/javascript" src="js/stu12.js"></script>

最初にajaxコンテンツ、次にスライダーのjs

これはloader.jsの内容です：

$(document).ready(function(){

// load home when the page loads
$("#content").load("home.html", function(){
  $(this).fadeIn("slow");
});

// load artworks page
$("#artworks > a").click(function(){
    $("#content").hide();
    $("#content").load("artworks.html", function(){
        $(this).fadeIn("slow");
    });
});

    // load projects page
    $("#artworks ul li a").click(function(){
        $("#content").hide();
        $("#content").load("project.html", function(){
            $(this).fadeIn("slow");
        });
    });

    // load single project page         
    $("#project_page").live("click", function(){
        $("#content").hide();
        $("#content").load("project.html", function(){
            $(this).fadeIn("slow");
        });
    });

        // load single project page         
        $("#project_slider").live("click", function(){
            $("#content").hide();
            $("#content").load("project_inside.html", function(){
                $(this).fadeIn("slow");
            });
        });

        // back to projects page        
        $(".back").live("click", function(){
            $("#content").hide();
            $("#content").load("project.html", function(){
                $(this).fadeIn("slow");
            });
        }); 

// load prensa page
$("#prensa_nav").click(function(){
    $("#content").hide();
    $("#content").load("prensa.html", function(){
      $(this).fadeIn("slow");
    });
});

// load contacto page
$("#contacto_nav").click(function(){
    $("#content").hide();
    $("#content").load("contacto.html", function(){
      $(this).fadeIn("slow");
    });
}); 

// active menu item
$(function() {
    $('#menu li').click(function() {
        $('#menu li').each(function() {
            $(this).removeClass('active');
        });
        $(this).addClass('active');
    });
});


/* Menu dropdown */
$(document).ready(function($){

    // Add class of drop if item has sub-menu
    $('ul.submenu').closest('li').addClass('drop');

    // Left Sidebar Main Navigation
    var menu_ul = $('.menu > li.drop > ul'),
        menu_a  = $('.menu > li.drop > a');

    menu_ul.hide()    

    menu_a.click(function(e) {
        e.preventDefault();
        if(!$(this).hasClass('active')) {
            menu_a.removeClass('active');
            menu_ul.filter(':visible').slideUp('normal');
            $(this).addClass('active').next().stop(true,true).slideDown('normal');
        } else {
            $(this).removeClass('active');
            $(this).next().stop(true,true).slideUp('normal');
        }
    });

});
});
4

1 に答える 1

2

を見るとstu12.js、さまざまなdivに非同期でロードされるデータを処理するようには設計されていませんslidePanel。

これを回避するには、slidePanelsをHTMLにロードした後にJSをロードすることをお勧めします。

コードを見ると、slidePanelがどこにロードされているのかわかりませんか？動的にロードされたHTMLファイルの1つで？複数のHTMLファイルにこれらのスライドパネルがある場合は問題が発生します。

したがって、最初にHTMLから次の行を削除します。

<script type="text/javascript" src="js/stu12.js"></script>

slidePanelsが1つのHTMLファイルにのみ含まれている場合は、ステートメント$(this).fadeIn("slow");がスライダーJavaScriptに動的にロードされる前に、関連するHTMLロードにこれを追加します。

   $.getScript("js/stu12.js")
      .done(function(script, textStatus) {
            console.log( textStatus );
      })
      .fail(function(jqxhr, settings, exception) {
           console.log( "Error loading stu12.js: " + exception);
   });

複数のHTMLページにこれらのスライドパネルが動的に読み込まれる場合は、JavaScriptを変更して、すべてのHTMLページがページの読み込み時に動的に読み込まれるようにすることをお勧めしますが、さまざまなdivに非表示にして、さまざまなクリック機能で表示できます。

次に、すべてのHTMLページに次のようなものが読み込まれると、スライダーJavaScriptを読み込むことができます。

$('#content').ajaxStop(function() {
       $.getScript("js/stu12.js")
          .done(function(script, textStatus) {
                console.log( textStatus );
          })
          .fail(function(jqxhr, settings, exception) {
               console.log( "Error loading stu12.js: " + exception);
       });
});
于 2012-10-14T22:00:03.220 に答える