0

AJAXを介して画像スライダーを読み込もうとしています。スライダーを含むページの直接URLを入力すると、問題なく機能します。しかし、AJAXを介してロードしようとすると、ロードされません。

$('.ajaxed').live('click', function(event) { // loading page via AJAX
    event.preventDefault();
    var link = $(this).attr('href')+' #content'; // jQuery address variables
    var rewritepath = link.replace($url,'').replace(' #content',''); // jQuery address variables
    $('#board').load(link,'', function(){   
        $('html,body').delay(500).animate({scrollTop: 0}, 300, function() {
            $('#board').slideDown('slow');
        });
    });
    $.address.state($path).crawlable(true).value(rewritepath); // jQuery address
    return false;
});
$slider.royalSlider({
    captionShowEffects:["fade"],
    controlNavThumbs:true,  
    controlNavThumbsNavigation:true,        
    imageAlignCenter:true,
    imageScaleMode: "fill",
    welcomeScreenEnabled:false,
    hideArrowOnLastSlide:true,
    autoScaleSlider: true,
    autoScaleSliderWidth: 980,
    autoScaleSliderHeight: 650
});

スライダーコードを.ajaxed部分に配置すると、AJAXを使用した場合にのみ機能し、ページが直接読み込まれた場合は機能しません。

4

1 に答える 1

0

スライダーの初期化コードを関数に入れるだけで、どこからでも呼び出すことができます。例えば：

$('.ajaxed').live('click', function(event) { // loading page via AJAX
    event.preventDefault();
    var link = $(this).attr('href')+' #content'; // jQuery address variables
    var rewritepath = link.replace($url,'').replace(' #content',''); // jQuery address variables
    $('#board').load(link,'', function(){   
        $('html,body').delay(500).animate({scrollTop: 0}, 300, function() {
            $('#board').slideDown('slow');
        });
        init_slider();
    });
    $.address.state($path).crawlable(true).value(rewritepath); // jQuery address
    return false;
});

init_slider();

function init_slider() {
    $slider.royalSlider({
        captionShowEffects:["fade"],
        controlNavThumbs:true,  
        controlNavThumbsNavigation:true,        
        imageAlignCenter:true,
        imageScaleMode: "fill",
        welcomeScreenEnabled:false,
        hideArrowOnLastSlide:true,
        autoScaleSlider: true,
        autoScaleSliderWidth: 980,
        autoScaleSliderHeight: 650
    });
}
于 2012-04-09T01:36:59.630 に答える