0

このjQueryグレースケールプラグインを使用しています。サンプルページ、開発者ページ。

現在、効果は Internet Explorer でのみ機能します。そのページには3つの画像があります。最初の 2 つはグレースケールではありません。常にカラーで表示されます (ホバー効果あり/なし)。3 番目の画像はグレースケールですが、マウスをその上に置くと、2 番目の画像のグレースケール画像が表示されます。

これは、greyScale 関数をインスタンス化する方法です。

<script type="text/javascript">
    jQuery(function() {
        // fade in the grayscaled images to avoid visual jump
        jQuery("[class^='wp-image-'], [class*=' wp-image-']").hide().fadeIn(1000);
    });
    // user window.load to ensure images have been loaded
    jQuery(window).load(function () {
        jQuery("[class^='wp-image-'], [class*=' wp-image-']").greyScale({
            // call the plugin with non-defult fadeTime (default: 400ms)
            fadeTime: 500,
            reverse: false
        });
    });
</script>

これは、Firebug の 2 番目の画像の出力です。

<div class="gsWrapper" style="position: relative; display: inline-block;">
    <img width="80" height="80" alt="" src="http://www.adomain.com/wp-content/uploads/2012/04/picture2.jpg" title="Picture" class="size-full wp-image-317 alignnone" style="display: inline;">
</div>

これは、Firebug の 3 番目の画像の出力です。

<div class="gsWrapper" style="position: relative; display: inline-block;">
    <img width="80" height="80" alt="" src="http://www.adomain.com/wp-content/uploads/2012/04/picture3.jpg" title="Picture 3" class="alignnone size-full wp-image-320" style="display: inline;">
    <canvas style="left: 0px; position: absolute; top: 0px;" width="80" height="80" class="gsCanvas"></canvas>
    <canvas style="left: 0px; position: absolute; top: 0px;" width="80" height="80" class="gsCanvas"></canvas>
    <canvas style="left: 0px; position: absolute; top: 0px; opacity: 1;" width="80" height="80" class="gsCanvas"></canvas>
</div>

私の意見では、この機能は機能していましたが、現在は機能していないようです。変化したこと？どうすればエラーを見つけることができますか?

jQuery の競合を避けるために、スクリプトをfunctions.phpでロードしようとしました。wp_enque_scriptまた、jQuery コードを以下wp_head()に配置しheader.php、ここでの呼び出しを から$に変更しましたjQuery。現在、私はjQuery 1.7.2を使用しています（同じ効果で1.8.2で試しました）。また、すべてのプラグインを無効にしようとしましたが、それでも同じ結果です。

ここで、ページを Internet Explorer 内に保存し、Firefox で開きました。その後、ページは機能します。レンダリングに関係しているようですか？

編集：

したがって、プラグインcanvasは FF で動作します。すべての画像には次の画像が必要canvasです。

<div class="gsWrapper" style="position: relative; display: inline-block;">
    <img width="80" height="80" alt="" src="http://www.adomain.com/wp-content/uploads/2012/04/image4.jpg" title="image4" class="alignnone size-full wp-image-1515" style="display: inline;">
    <canvas style="left: 0px; position: absolute; top: 0px; opacity: 1;" width="80" height="80" class="gsCanvas"></canvas>
</div>

私の場合、最後の画像だけにキャンバス フィールドがあります (ここでは、最後の画像にはすべてのキャンバス フィールドがあります!)。したがって、コードは間違った要素に追加されます。プラグインには次の JS コードがあります。

this.each(function(index) {
    $(this).wrap('<div class="gsWrapper">');
    gsWrapper = $(this).parent();
    // ...

したがって、最初に要素をラップしてから、再度アクセスします。おそらく、これらの行にエラーがあり、index?

4

1 に答える 1

0

エラーが見つかったようです。ドメインには一時的な URL がありました。サイトがオンラインになり、新しいドメインを取得しました。スクリプトはプロキシ リクエストを作成しましたが、ここでは何らかの形で間違った要素に追加されています。

HTML のリンクを新しいドメインに変更したところ、問題なく動作するようになりました。それにもかかわらず、プロキシ リクエストは失敗するようであり、改善する必要があります。

$.getImageData({
    url: $(this).attr('src'),
    success: $.proxy(function(image) {
        can = greyScale(image, image.width, image.height);
        if ($options.reverse) { can.appendTo(gsWrapper).css({"display" : "block", "opacity" : "0"}); }
        else { can.appendTo(gsWrapper).fadeIn($options.fadeTime); }
      }, gsWrapper),
    error: function(xhr, text_status){
      // silently fail on error
    }
});
于 2012-10-01T15:25:22.740 に答える