Jquery Cycle Lite plugin unable to see images that have been loaded by an AJAX call

Question

Hi,

I am having problems using the jquery cycle lite plugin on some images that are added via AJAX.

Here is the jquery code:

$(function() {
                resizeWindow();
                $(window).bind("resize", resizeWindow);    

                $("#assignment-nav").accordion({
                    header: "h3",
                    autoHeight: false
                });

                $(".project").click(function() { // get the HTML and load into div
                    $('.image-holder').empty();
                    var justTheNumber = $(this).attr('id').replace('project-','');
                    $.get("get_project_images.php",
                        {project_id:justTheNumber},
                        function(data){
                            $('.image-holder').append(data);
                        }                           
                    );

                    $(".image-holder").cycle({  // Cycle plugin
                            prev:   '#prev',
                            next:   '#next',
                            timeout: 0,
                            speed: 250
                    })
                });
            });

My code works fine in that the IMG tags are loaded and the first image of the slide show is displayed. However the prev/next buttons don't work.

When I load the images via static HTML the slideshow prev/next links works fine. (I just copied and pasted the generated HTML.)

I understand I need to use something like .bind or .live to make the Cycle plugin 'see' the new images. I have tried everything I can think of but I can't make it work.

What am I doing wrong ?

Answer 1

Even though you are using Cycle Lite, I believe the documentation for the Cycle plugin should still work. So did you try this addSlide method?

There are a few other demos of it available as well.