JQuery Cycle plugin does not work inside a modal box (Simple Modal Plugin)

I am developing a Wordpress theme that opens up new posts in modal blocks instead of single pages.

The image slideshow plugin that I use to display images for each message ( jQuery Cycle Plugin ) works fine when the message is on its own page, but when using Simple Modal, the plugins appear in the list instead of the slide show, completely breaking my layout.

Here's what post looks like on its own (click images for a preliminary slide show): http://cl.ly/240c3C0i1m1o

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

I assume the jQuery Cycle plugin does not work in the modal field because it refers to the page before loading the modal content by clicking the link? I really do not know.

Any help would be greatly appreciated. I used this answer to help me implement a modal block: Using simplemodal with wordpress . I have included some relevant codes from my topic 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 is contained in product-slideshow.js(initiates settings for the loop plugin):

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

I have this in functions.phporder to make modal 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 file site.js:

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;
    });
});
+5
1

. .

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

-

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

            }
        });
+11

All Articles