移动端查看图片插件smartPhoto

灰太狼 2022-11-11 05:14 270阅读 0赞

官网地址：[https://appleple.github.io/SmartPhoto/][https_appleple.github.io_SmartPhoto]  
演示地址：[https://appleple.github.io/SmartPhoto/demo.html][https_appleple.github.io_SmartPhoto_demo.html]  
Github地址：[https://github.com/appleple/SmartPhoto][https_github.com_appleple_SmartPhoto]  
CSDN下载地址：[https://download.csdn.net/download/wkh\_\_\_/16073809][https_download.csdn.net_download_wkh_16073809]

**效果图**  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3draF9fXw_size_16_color_FFFFFF_t_70][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3draF9fXw_size_16_color_FFFFFF_t_70 1][]

> 这个插件整体功能不是很多，只有最基本的放大缩小下一张等。不过这已经完全满足我的需求了。  
> 此插件也提供npm或者yarn的方式安装，使得vue框架使用这个插件也很方便，当然也提供与jquery搭配使用。  
> 使用起来非常简单，推荐直接去官网看示例，本文主要以记录为目的

**引入**

const smartPhoto = require('smartphoto');  
    
    
    <script src="https://unpkg.com/smartphoto@1.1.0/js/smartphoto.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/smartphoto@1.1.0/css/smartphoto.min.css">
    
    
    <script src="/path/to/js/smartphoto.min.js"></script>
    <link rel="stylesheet" href="/path/to/css/smartphoto.min.css">

**html**

> **data-caption**：每张图片的描述  
> **data-id**：每张图片的唯一值  
> **data-group**：为图片分组，同一组图片可直接滑动下一张

**javascript**

// 原生Js方式
    window.addEventListener('DOMContentLoaded',function(){ 
        new SmartPhoto(".js-smartPhoto");
    });
    
    // Jquery方式
    $(function(){ 
        $(".js-smartPhoto").SmartPhoto();
    });

**其他自定义参数**

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>默认值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>arrows</td> 
   <td>true</td> 
   <td>是否显示前后导航按钮。</td> 
  </tr> 
  <tr> 
   <td>nav</td> 
   <td>true</td> 
   <td>是否在底部显示导航缩略图。</td> 
  </tr> 
  <tr> 
   <td>useOrientationApi</td> 
   <td>true</td> 
   <td>是否使用加速计移动图片。</td> 
  </tr> 
  <tr> 
   <td>resizeStyle</td> 
   <td>‘fill’</td> 
   <td>resize图像时是fill还是fit屏幕。</td> 
  </tr> 
  <tr> 
   <td>animationSpeed</td> 
   <td>300</td> 
   <td>切换图片时的动画速度。</td> 
  </tr> 
  <tr> 
   <td>forceInterval</td> 
   <td>10</td> 
   <td>对图像施加力的频率</td> 
  </tr> 
 </tbody> 
</table>

**调用函数**

var photo= new SmartPhoto(".js-smartPhoto");
    
    // zoom in
    photo.zoomPhoto();
    // zoom out
    photo.zoomOutPhoto();
    // slide to the 6th image
    photo.gotoSlide(6);
    // add new image to your gallery
    photo.addNewItem(element);

**监听事件**

对你有帮助的话，给个赞呗~

[https_appleple.github.io_SmartPhoto]: https://appleple.github.io/SmartPhoto/
[https_appleple.github.io_SmartPhoto_demo.html]: https://appleple.github.io/SmartPhoto/demo.html
[https_github.com_appleple_SmartPhoto]: https://github.com/appleple/SmartPhoto
[https_download.csdn.net_download_wkh_16073809]: https://download.csdn.net/download/wkh___/16073809
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3draF9fXw_size_16_color_FFFFFF_t_70]: /images/20221022/17e7d83bcc5b414e907fbd62621b26d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3draF9fXw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210319111953550.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3draF9fXw==,size_16,color_FFFFFF,t_70