jQuery Cycle插件不能在Modal Box（簡單模式插件）中工作

我正在開發一個Wordpress主題，它在模態框中而不是在單獨的頁面中打開新帖子。jQuery Cycle插件不能在Modal Box（簡單模式插件）中工作

我使用每個帖子顯示圖像（jQuery Cycle Plugin）圖像幻燈片插件的偉大工程時，帖子是自己的頁面上，但使用Simple Modal插件時，圖像在一個列表，而不是幻燈片顯示，徹底打破了我的佈局。

下面是後看起來像它自己（點擊圖片到推進幻燈片）：http://cl.ly/240c3C0i1m1o

您可以在此頁面上的第一個縮略圖點擊看如何模態工作（我還沒有唯一的URL編碼對於模態呢:)：http://cl.ly/3A2J1V2q1T0P

我認爲jQuery Cycle插件不能在模式框中工作，因爲它通過單擊鏈接加載模態內容之前將它自身應用於頁面？我真的不知道。

任何幫助將不勝感激。我用這個答案來幫助我實現模態框：Using simplemodal with wordpress。我在下面列出了我的主題中的一些相關代碼。

這是我的header.php文件：在functions.php我有這個

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

得到：

<?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'S（發起週期插件的設置）莫代爾上班：

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

來源

2013-04-02 Danny Cooper

您正在初始化文檔就緒的週期。你需要初始化模態顯示。

檢查他們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 
       }); 

      } 
     });

來源

2013-04-04 09:02:22 anpsmn

jQuery Cycle插件不能在Modal Box（簡單模式插件）中工作

回答

相關問題