jquery - Wordpress JS の競合 (?) - PrettyPhoto、jQuery

Question

私はこの問題を解決しようと午後中ずっと凶暴になってきましたが、何をすべきかを理解するのに十分な Javascript を知らないだけだと思います。ここを含め、たくさんの投稿を読んでいますが、どうすればいいのかまだわかりません。

私は現在、デザイナーから購入した Wordpress テーマを使用していますが、それ以来姿を消し、テーマに関するメッセージに返信していません。

このテーマでは、シンプルでエレガントな「PrettyPhoto」ライトボックスプラグイン ( http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/）。

以前はすべて問題なく機能していましたが、今日突然、「ライトボックス」効果がキャンセルされていることに気付きました。すべての写真が、フローティングウィンドウにポップアップ表示されるのではなく、メインページの下に開くようになりました。例はこちら）。

私が理解していることから、それはおそらく私のテーマ内で起こっている一種のJavaScriptの競合ですが、私はそれに指を置くことはできません. JS ディレクトリに jQuery 1.8.2 ファイルがありましたが、それをバージョン 1.9.1 に置き換えても何の喜びもありませんでした。

Firebug により、次の JS エラーが表示されます。

    TypeError: $ is not a function      $('#navigation ul.menu').supersubs({          -   seso.js (line 2)
Error: Permission denied to access property 'toString'
TypeError: $ is not a function      $('#navigation ul.menu').supersubs({              - seso.js (line 2)

「Seso.js」は私のテーマ (「Seso」という名前) に付属するファイルで、コードは次のとおりです。

jQuery(document).ready(function() {
    $('#navigation ul.menu').supersubs({ 
            minWidth:    15,
            maxWidth:    30,
            extraWidth:  1     
        }).superfish({ hoverClass: "sfHover", speed: 'slow', dropShadows: false, delay: 0, animation: {height:'show'}});
    $('.up a[href$="top"]').click( function() {
        $.scrollTo( $('#top'), {speed:1200} );
    })
    $('#navigation ul.menu>li>ul>li, #navigation ul.menu>li>ul>li>ul>li').hover(function() { //mouse in
        $(this).stop().animate({ paddingLeft: '5px' }, 300);
    }, function() { //mouse out
    $(this).stop().animate({ paddingLeft: 0 }, 300);
    });
    $(".socialtip").tipTip();
    jQuery(".toggle_body").hide(); 

    jQuery("h4.toggle").toggle(function(){
        jQuery(this).addClass("toggle_active");
        }, function () {
        jQuery(this).removeClass("toggle_active");
    });

    jQuery("h4.toggle").click(function(){
        jQuery(this).next(".toggle_body").slideToggle();

    });
    $("a[rel^='prettyPhoto']").prettyPhoto({animationSpeed:'slow',theme:'facebook',slideshow:5000});
    var enable_image_hover = function(image){
        if(image.is(".portfolio")){
            if (jQuery.browser.msie && parseInt(jQuery.browser.version, 10) < 7) {} else {
                if (jQuery.browser.msie && parseInt(jQuery.browser.version, 10) < 9) {
                    image.hover(function(){
                        jQuery(".image_overlay",this).css("visibility", "visible");
                    },function(){
                        jQuery(".image_overlay",this).css("visibility", "hidden");
                    }).children('img').after('<span class="image_overlay"></span>');
                }else{
                    image.hover(function(){
                        jQuery(".image_overlay",this).animate({
                            opacity: '1'
                        },"fast");
                    },function(){
                        jQuery(".image_overlay",this).animate({
                            opacity: '0'
                        },"fast");
                    }).children('img').after(jQuery('<span class="image_overlay"></span>').css({opacity: '0',visibility:'visible'}));
                }
            }
        }       
    }

    $('.portfolio').preloader({
        delay:200,
        imgSelector:'.imgbg img',
        beforeShow:function(){
            $(this).closest('.image_frame').addClass('preloading');
        },
        afterShow:function(){
            var image = jQuery(this).closest('.image_frame').removeClass('preloading').children("a");
            enable_image_hover(image);
        }
    });
    $('.post').preloader({
        delay:100,
        imgSelector:'.postimage img',
        beforeShow:function(){
            $(this).closest('.postimage').addClass('preloading');
        },
        afterShow:function(){
            var image = jQuery(this).closest('.postimage').removeClass('preloading');
        }
    });
});
(function($) {

    $.fn.preloader = function(options) {
        var settings = $.extend({}, $.fn.preloader.defaults, options);


        return this.each(function() {
            settings.beforeShowAll.call(this);
            var imageHolder = $(this);

            var images = imageHolder.find(settings.imgSelector).css({opacity:0, visibility:'hidden'});  
            var count = images.length;
            var showImage = function(image,imageHolder){
                if(image.data.source != undefined){
                    imageHolder = image.data.holder;
                    image = image.data.source;  
                };

                count --;
                if(settings.delay <= 0){
                    image.css('visibility','visible').animate({opacity:1}, settings.animSpeed, function(){settings.afterShow.call(this)});
                }
                if(count == 0){
                    imageHolder.removeData('count');
                    if(settings.delay <= 0){
                        settings.afterShowAll.call(this);
                    }else{
                        if(settings.gradualDelay){
                            images.each(function(i,e){
                                var image = $(this);
                                setTimeout(function(){
                                    image.css('visibility','visible').animate({opacity:1}, settings.animSpeed, function(){settings.afterShow.call(this)});
                                },settings.delay*(i+1));
                            });
                            setTimeout(function(){settings.afterShowAll.call(imageHolder[0])}, settings.delay*images.length+settings.animSpeed);
                        }else{
                            setTimeout(function(){
                                images.each(function(i,e){
                                    $(this).css('visibility','visible').animate({opacity:1}, settings.animSpeed, function(){settings.afterShow.call(this)});
                                });
                                setTimeout(function(){settings.afterShowAll.call(imageHolder[0])}, settings.animSpeed);
                            }, settings.delay);
                        }
                    }
                }
            };


            images.each(function(i){
                settings.beforeShow.call(this);

                image = $(this);

                if(this.complete==true){
                    showImage(image,imageHolder);
                }else{
                    image.bind('error load',{source:image,holder:imageHolder}, showImage);
                    if($.browser.opera){
                        image.trigger("load");//for hidden image
                    }
                }
            });
        });
    };


    //Default settings
    $.fn.preloader.defaults = {
        delay:1000,
        gradualDelay:true,
        imgSelector:'img',
        animSpeed:500,
        beforeShowAll: function(){},
        beforeShow: function(){},
        afterShow: function(){},
        afterShowAll: function(){}
    };
})(jQuery);

私はこの JS ファイルを作成していないので、そのすべての機能が何のためにあるのか正確にはわかりません。それらの90％は必要ないと確信しています。

完全を期すために、現在の WP header.php ヘッドタグの内容を以下に示します。

<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type') ?>; charset=<?php bloginfo('charset') ?>" />
<title><?php if (is_front_page()) { ?><?php bloginfo('name'); ?> - <?php bloginfo('description'); ?><?php } else { ?><?php wp_title($sep = ''); ?> - <?php bloginfo('name'); ?><?php } ?></title>

<link rel="stylesheet" href="<?php echo $themePath ?>/css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="<?php echo $themePath ?>/css/imageflow.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo $themePath ?>/css/options.php" type="text/css" media="screen" />
<?php if(get_option_tree ('customcss', '')){ ?>
<style type="text/css">
<?php echo  get_option_tree ('customcss', ''); ?>
</style>
<?php } ?>
<?php wp_head(); ?>
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.prettyPhoto.js"></script>
<script type="text/javascript">   
jQuery(document).ready(function($) {
   $("a[href$='.jpg'], a[href$='.jpeg'], a[href$='.gif'], a[href$='.png']").prettyPhoto({
    animationSpeed: 'normal', /* fast/slow/normal */
    padding: 40, /* padding for each side of the picture */
    opacity: 0.35, /* Value betwee 0 and 1 */
    showTitle: true, /* true/false */
    theme: 'pp_default' /* light_rounded / dark_rounded / light_square / dark_square / facebook */      
    }); 

})

</script>
</head>

他のライトボックスプラグインを使用してみましたが、結果は同じです。

最も奇妙なことは、PrettyPhoto が私のローカルサーバーで動作することです。私のサイトのローカルバージョンとオンラインバージョンの主な違いは、後者が Wordpress の新しいバージョンであることです...

テーマ内に深刻な JS 競合がありますが、その原因が見つかりません。誰かが手がかりを持っている場合は、すべての助けをいただければ幸いです!

乾杯、D-

score 0 · Accepted Answer

0

于 2013-04-23T13:40:47.047 に答える

jquery - Wordpress JS の競合 (?) - PrettyPhoto、jQuery

1 に答える 1

Related

Reference