5

別のページではなく、モーダル ボックスで新しい投稿を開く Wordpress テーマを開発しています。

各投稿の画像を表示するために使用している画像スライドショー プラグイン ( jQuery Cycle Plugin ) は、投稿が独自のページにある場合にうまく機能しますが、Simple Modalプラグインを使用すると、画像はスライドショーではなくリストに表示されます。私のレイアウトを完全に壊します。

投稿自体は次のようになります (画像をクリックしてスライドショーを進めます): http://cl.ly/240c3C0i1m1o

このページの最初のサムネイルをクリックして、モーダルがどのように機能するかを確認できます (モーダル用の一意の URL をまだコーディングしていません): http://cl.ly/3A2J1V2q1T0P

リンクをクリックしてモーダル コンテンツが読み込まれる前に jQuery Cycle プラグインがページに適用されるため、モーダル ボックスで 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;
    });
});
4

1 に答える 1