支持移动端的仿medium图片放大预览js插件

使用方法：

在页面中引入mediumLightbox.js和样式文件style.css。

         <link rel='stylesheet' type='text/css 'href='css/style.css'/>   

      <script  src="mediumLightbox.js"></script>        
  

HTML结构 

<figure  class="half  left  zomm-effect">
        <div  class="aspectRatioPlaceholder">
               <div  class="aspect-ratio-fill"  style="padding-bottom:50%;"></div>
               <img class="img" data-width="900" data-height="450" src="images.jpg">
        </div>
<figure>    

初始化插件

 在页面DOM元素加载完毕之后，可以通过MediumLiightbox()来实例化对象。

MediumLightbox('figure.zoom-effect');               

一个可用的配置参数

MediumLightbox('figure.zoom-effect', {
    margin:40 (margin:图片被放大是添加图片上的margin值，默认其为20像素。)
});     

详情查询链接：https://github.com/davidecalignano/MediumLightbox