Lazy-loadとfancyboxを共存させたい

事象

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

https://hatenablog-parts.com/embed?url=https://wordpress.org/plugins/lazy-load/

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

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

<a class="fancybox thumbnail" 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>

回答

確かに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>