Images slider does not work in ajax loaded content

2 Views
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",
});

});

The ajax content working prefect but when i load the content in to ajax div the slider ( royal slider ) doesn’t work . how can i modify the code to achieve royal slider . im using wordpress and custom designed theme .

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. I cant tell for sure without some context and maybe some HTML code, but I think you need to call the $('#slider').royalSlider(...); again after you load the new content.

    When you call this function the first time, you are targeting the #slider currently in the DOM. When you load the new content with your ajax call, you removed this element and replace it with a new one. I believe you just need to initialize your slider again.