图像滑块在加载ajax的内容中不起作用

时间:2012-06-05 19:22:14

标签: jquery ajax wordpress

jQuery(document).ready(function($) {
var $mainContent = $("#main_class"),
    siteUrl = "http://" + top.location.host.toString(),
    url = ''; 
$(document).delegate("a[href*='/classes/']:not([href*=/wp-admin/]):not([href*=/wp-login.php]):not([href$=/feed/]):not([href$=/event-registration/])", "click", function() {
    location.hash = this.pathname;
    return false;
}); 

$(window).bind('hashchange', function(){
    url = window.location.hash.substring(1); 
    if (!url) {
        return;
    } 
    url = url + " #main"; 
    $mainContent.animate({opacity: "0.1"}).html('Please wait...').load(url, function() {
        $mainContent.animate({opacity: "1"});
    });
});
$(window).trigger('hashchange');
$('#slider').royalSlider({            
           imageAlignCenter:true,
           imageScaleMode: "fill",
});

});

ajax内容工作完美但当我将内容加载到ajax div时滑块(皇家滑块)不起作用。我怎么能修改代码来实现皇家滑块。即时通讯使用wordpress和自定义设计的主题。

1 个答案:

答案 0 :(得分:0)

我无法确定没有上下文和一些HTML代码,但我认为您需要在加载新内容后再次调用$('#slider').royalSlider(...);

第一次调用此函数时,您的目标是DOM中当前的#slider。使用ajax调用加载新内容时,删除了此元素并将其替换为新元素。我相信你只需要再次初始化你的滑块。