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);
data.modal({
overlayCss:{backgroundColor:'#FFF'},
containerCss:{backgroundColor:'#fff'}
});
});
return false;
});
});