jQuery Cycle Plugin Not Working Inside of Modal Box (Simple Modal Plugin)

Question

I'm developing a Wordpress theme that opens new posts in modal boxes instead of separate pages.

The image slideshow plugin I'm using to display images for each post (jQuery Cycle Plugin) works great when the post is on its own page, but when using the Simple Modal plugin, the images are shown in a list instead of a slideshow, completely breaking my layout.

Here's what a post looks like on its own (click images to advance slideshow): http://cl.ly/240c3C0i1m1o

You can click on the first thumbnail on this page see how the modal works (I haven't coded in unique URL's for modals yet): http://cl.ly/3A2J1V2q1T0P

I assume the jQuery Cycle plugin isn't working in the modal box because it applies itself to the page before the modal content is loaded by clicking a link? I really don't know.

Any help would be much appreciated. I used this answer to help me implement the modal box: Using simplemodal with wordpress. I have included some relevant code from my theme below.

This is in my header.php file:

<?php
        wp_enqueue_script('jquery.cycle.all.min.js', '/wp-content/themes/Goaty%20Tapes%20Theme/js/jquery.cycle.all.min.js', array('jquery'));
        wp_enqueue_script('product-slideshow', '/wp-content/themes/Goaty%20Tapes%20Theme/js/product-slideshow.js');
?>

This is what's contained in product-slideshow.js (initiates the settings for cycle plugin):

$(document).ready(function() { $('.product-images').cycle({ 
    fx:      'none', 
    next:   '.slide',
    timeout:  0
}); });

I have this in functions.php to get the modal to work:

function my_print_scripts() {
        if (!is_admin()) {
            $url = get_bloginfo('template_url');
            wp_enqueue_script('jquery-simplemodal', 'http://66.147.244.226/~goatytap/wp-content/themes/Goaty%20Tapes%20Theme/js/jquery.simplemodal.1.4.1.min.js', array('jquery'), '1.4.1', true);
            wp_enqueue_script('my_js', 'http://66.147.244.226/~goatytap/wp-content/themes/Goaty%20Tapes%20Theme/js/site.js', null, '1.0', true);
        }
    }
    add_action('wp_print_scripts', 'my_print_scripts');

This is in my site.js file:

jQuery(function ($) {
    $('a.popup').click(function(){
        id = this.rel;
        $.get('http://66.147.244.226/~goatytap/ajax-handler/?id='+id, function (resp) {
            var data = $('<div id="ajax-popup"></div>').append(resp);
            // remove modal options if not needed
            data.modal({
                overlayCss:{backgroundColor:'#FFF'}, 
                containerCss:{backgroundColor:'#fff'}
            });
        });
        return false;
    });
});

Answer 1

You are initializing the cycle on document ready. You need to initialize on modal show.

Check their documentation

onShow [Function:null]
The callback function used after the modal dialog has opened

Something like this

data.modal({
            overlayCss:{backgroundColor:'#FFF'}, 
            containerCss:{backgroundColor:'#fff'},
            onShow: function (dialog) {
               $('.product-images').cycle({ 
                   fx:      'none', 
                   next:   '.slide',
                   timeout:  0
               }); 

            }
        });