elevateZoomを設置したWebページをスマートフォンで表示するとスクロールできなくなる件

elevateZoomってのは、画像の拡大（ズーム）表示ができるプラグインです。
こんな感じ。http://sample.bear-life.com/sample/elevatezoom/

これをスマートフォンで表示してページをスクロールしようとすると、ズームを設定した画像の上ではスクロールできなくなってしまいます。

「elevatezoom スクロールしない」とかで検索したら、このページが見つかったんだけど、https://living-sun.com/ja/jquery/528850-image-of-elevatezoom-not-scrolling-in-cell-phone-jquery-mobile-scroll-mobile-phones.html
ここに書いていることをしても、全然改善しなかったです。

さらに、いろいろと試してみたのですが、まずは　scrollZoom:trueをfalseにして、スクロールできるようにするという方法です。chromeの検証でスマホ表示して確認すると、これで解決していました。しかし、iPhone実機で確認すると、スクロールできないままなので、解決しませんでした。

確認していないけど、アンドロイドとかだったら、スクロールできたかもしれないですね。

そもそもこのプラグインは、スマートフォンのようなタッチディスプレイでは、意図したようにズーム表示が動作しないので、スマートフォンやタブレットの場合は、 elevatezoom 自体を無効にすればよいです。

画像を表示するHTMLはこんな感じですよね。

<img id="zoom" src="small_image.jpg" data-zoom-image="large_image.jpg">

#zoomに対して、 elevateZoom を設定します。
↓　基本はこれだけ。

$("#zoom").elevateZoom();

これを、モバイルの場合とパソコンの場合で、分岐します。判定条件はデバイスワイドで判定しました。

/*
スマートフォンかタブレットか判別する関数を定義
device-widthで判別してます。
*/
function isSmartPhone() {
	if (window.matchMedia && window.matchMedia('(max-device-width: 1020px)').matches) {
		return true;
	} else {
		return false;
	}
}

$(document).ready(function () {	
	if(isSmartPhone()==false){
		$("#zoom").elevateZoom();
	}
}

詳しくは、こちらを見てください。

だけどですね。こちらのサイトのように　複数の写真をギャラリー表示する場合は、これじゃうまくいかないんです。

それはなぜかというとですね。

上記のサイトで紹介されている方法は、ギャラリー表示にfancyboxを使っています。そして、fancyboxで表示する画像のデータは、elevatezoomで生成したデータを渡してます。

<script>
    $(document).ready(function () {
            $('.fancybox').fancybox();
 
            $("#zoom_01").elevateZoom({
                gallery:'slide-detail-carousel-1', 
                cursor: 'pointer', 
                galleryActiveClass: 'active', 
                imageCrossfade: true,
                loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'
            }); 
            //pass the images to Fancybox
            $("#zoom_01").bind("click", function(e) {  
              var ez =   $('#zoom_01').data('elevateZoom'); 
                $.fancybox(ez.getGalleryList());
              return false;
            });
        });
</script>

elevatezoomで生成したデータをfancyboxに渡して、ギャラリー表示をするので、elevatezoomを無効にすると、fancyboxも表示されなくなります。

なので、fancybox用のデータ専用のimg要素を別途作成して、これは常にdisplay:none;で非表示にします。idは data_for_fancybox みたいな感じでつけときます。　

実際は、ギャラリー用の画像って、手書きでHTMLを描くんじゃなくて、PHPとかのプログラムでループで吐き出すと思うのでですね。

javascriptはこんな感じです。

<script>
	
function isSmartPhone() {
	if (window.matchMedia && window.matchMedia('(max-device-width: 1020px)').matches) {
		return true;
	} else {
		return false;
	}
}
$(document).ready(function () {
	
	if(isSmartPhone()==false){
		$("#zoom").elevateZoom({
			gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: 'active',
			imageCrossfade: true,scrollZoom:true
		});
	}
	
	$("#data_for_fancybox").elevateZoom({gallery:'gallery_01'});
		
	
	//pass the images to Fancybox
	$("#zoom").bind("click", function(e) {  
		var ez =   $('#data_for_fancybox').data('elevateZoom');
		$.fancybox(ez.getGalleryList());
		return false;
	}); 
}); 
</script>

こんな感じで、対策をしました。