メニュー
解決済
回答
1
wordpress wordpress Lazy-loadとfancyboxを共存させたい

2016年10月14日 21:49

たくさんの画像のあるページの読み込みを早くしたいと思い、「Lazy-load」のプラグインを導入しました。

しかし、今まで動いていたfancyboxが動かなくなりました。替わりにLightboxなどに変更してみたりしましたが同様に画像の拡大されません(下図のように何もない空白の画像が拡大されます。)

ソースを確認すると「Lazy load」プラグインで画面がロードされるまでは、1ピクセルの画像1x1.trans.gifを差し替えているからだというところまではわかりましたが、どうやって共存させてよいかわかりません。

<a  rel="group" href="https://xxx.com/wp-content/plugins/lazy-load/images/1x1.trans.gif" title="">
<img src="https://xxx.com/xxx.png" alt="" data-lazy-loaded="true" style="display: block;">
</a>

    高橋 良輔 4年 ago  

    確かにLazy loadプラグインで画像が差し替わっているのが原因なので、画面スクロールして画像がロードされたタイミングでfancyboxを適用すればよいと思います。

    なので、fancyboxをプラグインで実装している場合はアンインストールしてjqueryのプラグインのfancyboxをダウンロードして導入しましょう。

    導入したら下記のように実装すれば動くはずです。var allImage = $(".main-content img");の箇所は環境に合わせ修正してください。(fancyboxさせたいimgをセレクタに指定してください。)

    $(allImage[i]).bind("load", function(){}でLazy loadが画像を読み込み終了したタイミングのイベントを拾えるので、そのタイミングでfancyboxを適用しています。

    <script src="<?php bloginfo('template_directory'); ?>/js/fancybox/jquery.fancybox.pack.js"></script>
    <script src="<?php bloginfo('template_directory'); ?>/js/fancybox/helpers/jquery.fancybox-thumbs.js"></script>
    <script src="<?php bloginfo('template_directory'); ?>/js/fancybox/helpers/jquery.fancybox-media.js"></script>
    <script>
    jQuery(function($){
      // lazy-loadとfancyboxを共存
      var allImage = $(".main-content img");
      var allImageCount = allImage.length;
      var completeImageCount = 0;
      for(var i = 0; i < allImageCount; i++){
        $(allImage[i]).bind("load", function(){
          $(this).wrap('<a class="fancybox thumbnail" rel="group" href="'+$(this).attr('src')+'" title="'+$(this).attr('alt')+'"></a>');
          $(".fancybox").fancybox({
              prevEffect  : 'fade',
              nextEffect  : 'fade',
              openEffect  : 'elastic',
              closeEffect : 'elastic',
              helpers:  {
                  thumbs : {
                      width: 50,
                      height: 50
                  },
                  media : {},
                  title : {
                      type : 'inside'
                  }
              },
          });
        });
      }
    });
    </script>
    

コメントを追加するためには 会員登録・ログインが必要です。

太字斜体H3H4リンク画像引用コード番号リストリスト

投稿者プロフィール
新しもの好きエンジニア。