Question

当与我的ajax内容加载器结合使用时，我的图像滑块不起作用，但滑块单独工作。当我在我的网站上试用它时，图像滑块仅在刷新页面时有效。任何想法为什么这些都没有合作？

$(document).ready(function() {

//menu loader
$('.n3').click(function() {
  $('#secNav').toggle();
  return false;
});
$('.n1 a, .n2 a, .n4 a').click(function() {
  $('#secNav').hide();
});


//content loader in portfolio div      
var hash = window.location.hash.substr(1);
var href = $('.n1 a, .n2 a, .n4 a, #secNav a').each(function(){
    var href = $(this).attr('href');
    if(hash==href.substr(0,href.length-5)){
        var toLoad = hash+'.html #portfolio';
        $('#portfolio').load(toLoad)
    }                                           
});

$('.n1 a, .n2 a, .n4 a, #secNav a').click(function(){

var toLoad = $(this).attr('href')+' #portfolio';
$('#portfolio').fadeOut("fast",loadContent);
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
    $('#portfolio').load(toLoad,'',showNewContent())
}
function showNewContent() {
    $('#portfolio').fadeIn("1000");
}
return false;
});


//active link diff color

    $("#nav a").click( function() { 
              $("#nav a").css("color", "#000");
              $(this).css("color", "#85f1f5");
            });

$("#secNav a").click( function() { 
              $("#secNav a").css("color", "#000");
              $(this).css("color", "#ff2712");
            });

$("#nav a").click( function() { 
              $("#secNav a").css("color", "#000");
            });




//end of doc ready
});


//image slider

$(window).load(function(){

// We are listening to the window.load event, so we can be sure
// that the images in the slideshow are loaded properly.


// Testing whether the current browser supports the canvas element:
var supportCanvas = 'getContext' in document.createElement('canvas');

// The canvas manipulations of the images are CPU intensive,
// this is why we are using setTimeout to make them asynchronous
// and improve the responsiveness of the page.

var slides = $('#slideshow li'),
    current = 0,
    slideshow = {width:0,height:0};

setTimeout(function(){

    window.console && window.console.time && console.time('Generated In');

    if(supportCanvas){
        $('#slideshow img').each(function(){

            if(!slideshow.width){
                // Taking the dimensions of the first image:
                slideshow.width = this.width;
                slideshow.height = this.height;
            }

            // Rendering the modified versions of the images:
            createCanvasOverlay(this);
        });
    }

    window.console && window.console.timeEnd && console.timeEnd('Generated In');

    $('#slideshow .arrow').click(function(){
        var li          = slides.eq(current),
            canvas      = li.find('canvas'),
            nextIndex   = 0;

        // Depending on whether this is the next or previous
        // arrow, calculate the index of the next slide accordingly.

        if($(this).hasClass('next')){
            nextIndex = current >= slides.length-1 ? 0 : current+1;
        }
        else {
            nextIndex = current <= 0 ? slides.length-1 : current-1;
        }

        var next = slides.eq(nextIndex);

        if(supportCanvas){

            // This browser supports canvas, fade it into view:

            canvas.fadeIn(function(){

                // Show the next slide below the current one:
                next.show();
                current = nextIndex;

                // Fade the current slide out of view:
                li.fadeOut(function(){
                    li.removeClass('slideActive');
                    canvas.hide();
                    next.addClass('slideActive');
                });
            });
        }
        else {

            // This browser does not support canvas.
            // Use the plain version of the slideshow.
            current=nextIndex;
            next.addClass('slideActive').show();
            li.removeClass('slideActive').hide();
        }
    });

},100);

// This function takes an image and renders
// a version of it similar to the Overlay blending
// mode in Photoshop. 
// **NOTE: REMOVED COLOR CHANGES

function createCanvasOverlay(image){

    var canvas          = document.createElement('canvas'),
        canvasContext   = canvas.getContext("2d");

    // Make it the same size as the image
    canvas.width = slideshow.width;
    canvas.height = slideshow.height;

    // Drawing the default version of the image on the canvas:
    canvasContext.drawImage(image,0,0);


    // Taking the image data and storing it in the imageData array:
    var imageData   = canvasContext.getImageData(0,0,canvas.width,canvas.height),
        data        = imageData.data;

    // Putting the modified imageData back to the canvas.
    canvasContext.putImageData(imageData,0,0);

    // Inserting the canvas in the DOM, before the image:
    image.parentNode.insertBefore(canvas,image);
}

//end of window load    
});

Answer 1

如果要用ajax替换一个新的滑块元素，则必须重新初始化滑块代码以处理新的html

伪代码示例

$('#sliderWrapper').load(  url, function(){

   /* new html exists, run all pertinent slider code*/
})

如果您删除所有不相关的代码（例如导航代码等）以解决与您的特定问题有关的内容，那将会有很大帮助。目前尚不清楚哪些部件与滑块相关

还要确保您没有再次加载jQuery并清除原始jQuery对象

图像滑块不适用于ajax内容加载程序

1 个答案: