jQuery slideshow plugin with .load()

Question

I'm trying to make an auto slideshow with pics from other .php file and to achieve that i've decided i will use http://responsiveslides.com/ jQuery plugin. The problem is that this plugin doesn't want to work with my photos by "loading" them from other file.

$('.first-option').click(function(){
    $('.inner-box').load('file.php .rslides');
});
$(function() {
    $("file.php .rslides").responsiveSlides();
});

*CSS/HTML are exactly the same way written like the author wrote in his "Usage".

Answer 1

try this:

$('.first-option').click(function(){
    $('.inner-box').load('file.php .rslides', function callback () {
        $('.rslides').responsiveSlides();
    });
});

I've not used the plugin before, but it appears that you need to apply the bootstrap method to the element that contains the slides you load into your page. So what you're doing in your code is attaching the load method to the click handler, while attaching the responsive slides to an empty selector when the DOM is ready. What I've provided above loads the content, and then using a callback function (when the content has successfully been loaded into the DOM), then calls the bootstrap method onto the original selector.

Edited the code to use the '.rslides' selector.