javascript - 在 ajax 加载的内容上加载 slider

Question

我正在使用的 slider 是这个:http://www.stunicholls.com/gallery/jquery-slide-anything.html

它在普通的 html 上工作正常，但是当我将它加载到 ajax 加载的内容上时，它不再工作了，我该如何修复它？

这是 slider 的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内容，然后是 slider 的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');
        }
    });

});
});

Answer 1

查看 stu12.js，它的设计目的不是处理异步加载到各个 slidePanel div 中的数据。

要解决此问题，我建议您在将 SlidePanel 加载到 HTML 中后加载 JS。

看代码，不知道slidePanels加载到哪里了？在动态加载的 HTML 文件之一中？如果多个 HTML 文件具有这些滑动面板，您将会遇到一个问题。

因此，首先从 HTML 中删除这一行:

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

如果幻灯片面板仅位于一个 HTML 文件中，则在语句 $(this).fadeIn("slow"); 之前添加相关 HTML 加载的此项，以动态加载 slider JavaScript :

   $.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 页面在页面加载时动态加载，但隐藏在不同的 HTML 页面中。然后可以使用不同的点击功能显示的 div。

一旦所有 HTML 页面都加载如下内容，您就可以加载 slider 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);
       });
});