Finger zoom in and out of mobile pictures and lazy loading of pictures

First, we need to introduce jQuery.js and pinchzoom.js

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/pinchzoom.js"></script>

2. Assume the html is as follows

<div class="content">
　　<img src="img/1.png" data-echo="img/1.png">
　　<img src="img/2.png" data-echo="img/2.png">
　　<img src="img/3.png" data-echo="img/3.png">
　　<img src="img/4.png" data-echo="img/4.png">
　　<img src="img/5.png" data-echo="img/5.png">
　　<img src="img/6.png" data-echo="img/6.png">
</div>

<div class="show">
　　　<div class="page" style="z-index:101;">
　　　　<div class="pinch-zoom" >
　　　　　　<img src="img/11.png">
　　　　　　<img src="img/11.png">
　　　　</div>
　　　</div>
</div>

The class is show. This part is the enlarged part. Class  page pinch-zoom These two classes are necessary classes. They are the classes that are enlarged by default by the plugin.

Below is the js part

echo.init();

$(function () {
　　$(".show").hide()
　　$('.pinch-zoom').each(function () {
　　　　new RTP.PinchZoom($(this), {});
　　});
　　$('img').click(function(e) {
　　　　var imgsrc =$(this).attr('src');
　　　　$('.show').show();
　　　　$('.page').show();
　　$('.page img').attr('src',imgsrc)

});

$('.page img').click(function(e) {
　　$('.show').hide();
　　$('.page').hide()
});
})

Finally add lazy loading

<script type="text/javascript" src="js/echo.min.js"></script>

Add echo.init(); to the script