Question

I’m trying to load an image slider via AJAX. When typing in the direct url of the page containing the slider, it works OK. But when trying to load it via AJAX, it doesn’t load.

$('.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
});

If I place the slider code into the .ajaxed part it only works using AJAX but not when the page is directly loaded.

Answer 1

You could just put the slider init code in a function, then you can call it from wherever you want. Eg:

$('.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
    });
}