Question

I have this problem which i find a bit difficult to explain but I will try:

I have a page which fades in and out some divs taken from other pages with the load() function on click event. One of this divs contain a selection of pictures showed using Jquery.Cycle. Although on the page itself the jquery.Cycle works ok, when imported in to the page it does not. Hope my explanation is clear.

The code for importing is this:

$('#wrapper a').live("click", function(evt) {

    evt.preventDefault();

    var url = $(this).attr('href');
    var oldDiv = $('#wrapper-content');
    var newDiv = $('#wrapper-content1').load(url + ' #wrapper-content');
    newDiv.hide();
    $('#wrapper-mid-in-right').prepend(newDiv);
    newDiv.fadeIn(1000);
    oldDiv.fadeOut(1000,function() {

    $(this).remove();
    });

});

As said the cycle effect works ok on the page. Please help me. F.

$('#gallery').cycle({
fx: 'scrollRight',
timeout: 100000,
speed: 500,
delay: -2000,
pager: '#pager'

});

Answer 1

I believe your problem has nothing to do with the code block you posted. The plugin works in the page itself because of a few things:

1. the Cycle plugin is loaded
2. the markup already exists
3. the plugin is initiated appropriately ($(document).ready(), etc.)

When dynamically loading this content into a page, none of these facts may be true.

1. Is the Cycle plugin being loaded in this page?
2. You have to initiate the Cycle plugin after you’ve imported the new markup.

The JS in the the parent page (the page loading the Cycle content) should be something roughly like:

$('#wrapper-content1').load(url + ' #wrapper-content', function() {
    $('#gallery').cycle({
        fx: 'scrollRight',
        timeout: 100000,
        speed: 500,
        delay: -2000,
        pager: '#pager'
    });
});