2013-04-02 1 views
5

Я разрабатываю тему Wordpress, которая открывает новые сообщения в модальных блоках вместо отдельных страниц.Плагин цикла jQuery не работает внутри модальной коробки (Simple Modal Plugin)

Изображение слайд-шоу плагин Я использую для отображения изображений для каждой должности (jQuery Cycle Plugin) отлично работает, когда пост на своей странице, но при использовании Simple Modal плагин, изображения отображаются в виде списка, а не слайд-шоу , полностью нарушая мой макет.

Вот что пост выглядит на своем собственном (щелкните изображение, чтобы перейти слайд-шоу): http://cl.ly/240c3C0i1m1o

Вы можете нажать на первый эскиз на этой странице посмотреть, как модальные работы (я не закодирован в уникальном URL, для модальных моделей еще нет): http://cl.ly/3A2J1V2q1T0P

Я предполагаю, что плагин jQuery Cycle не работает в модальном поле, потому что он относится к странице до того, как модальное содержимое загружается, щелкнув ссылку? Я действительно не знаю.

Любая помощь будет высоко оценена. Я использовал этот ответ, чтобы помочь мне реализовать модальный бокс: Using simplemodal with wordpress. Я включил некоторый соответствующий код из моей темы ниже.

Это в моем header.php файле:

<?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'); 
?> 

Это то, что содержится в product-slideshow.js (инициирует настройки плагина цикла):

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

у меня есть это в functions.php, чтобы получить модно для работы:

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'); 

Это в моем 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; 
    }); 
}); 

ответ

11

Вы инициализируете цикл готовности документа. Вам нужно инициализировать модальное шоу.

Проверить их documentation

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 
       }); 

      } 
     });