SmartPhoto-jquery移动手机响应式图片查看插件

当前位置:主页 > jQuery库 > Lightbox和对话框 > SmartPhoto-jquery移动手机响应式图片查看插件
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
SmartPhoto-jquery移动手机响应式图片查看插件
分享:

    插件介绍

    SmartPhoto是一款为移动手机量身打造的响应式图片查看jquery插件。它使用简单,在桌面设备中点击图片时会以Lightbox的方式来展示图片。在移动手机的小屏幕中,会以轮播图的方式来展示图片。

    浏览器兼容性

    浏览器兼容性
    时间:2017-06-05
    阅读:
简要教程

SmartPhoto是一款为移动手机量身打造的响应式图片查看jquery插件。它使用简单,在桌面设备中点击图片时会以Lightbox的方式来展示图片。在移动手机的小屏幕中,会以轮播图的方式来展示图片。SmartPhoto响应式图片的特点有:

  • 支持pinch-in/pinch-out/drag/swipe等手势操作。
  • 可以使用键盘或屏幕阅读器来进行访问。
  • 使用加速计移动图片。
  • 显示图片的URL hash地址。
  • 可以对图片进行分组。

安装

可以通过npm或yarn来安装SmartPhoto插件。

npm install smartphoto --save
yarn add smartphoto                  
                

使用方法

在页面中引入smartphoto.css和smartphoto.js文件。

<link href="path/to/css/smartphoto.css" rel="stylesheet">
<script src=""path/to/js/smartphoto.js"></script>
                
HTML结构

SmartPhoto响应式图片的基本HTML结构如下:

<a href="./assets/large-kuma.jpg" class="js-img-viwer" data-caption="描述1" data-id="kuma" data-group="0">
  <img src="./assets/kuma.jpg" width="360"/>
</a>
<a href="./assets/large-rakuda.jpg" class="js-img-viwer" data-caption="描述2" data-id="rakuda" data-group="0">
  <img src="./assets/rakuda.jpg" width="360"/>
</a>
<a href="./assets/large-sai.jpg" class="js-img-viwer" data-caption="描述3" data-id="sai" data-group="0">
  <img src="./assets/sai.jpg" width="360"/>
</a>
                
初始化插件

在页面DOM元素加载完毕之后们可以通过下面的方法来初始化SmartPhoto响应式图片插件。

require

const smartPhoto = require('smartphoto');                  
                

smartphoto.js-纯js方法

document.addEventListener('DOMContentLoaded',function(){
    new smartPhoto(".js-img-viwer");
});                  
                

作为jquery插件

$(function(){
    $(".js-img-viwer").smartPhoto();
});                  
                

配置参数

SmartPhoto响应式图片插件的可用配置参数有:

参数 默认值 描述
arrows true 是否显示前后导航按钮。
nav true 是否在底部显示导航缩略图。
useOrientationApi true 是否使用加速计移动图片。
resizeStyle 'fill' resize图像时是fill还是fit屏幕。
animationSpeed 300 切换图片时的动画速度。
forceInterval 10 frequency to apply force to images

事件

SmartPhoto响应式图片插件的可用事件有:

// when the modal opened
photo.on('open',function(){
    console.log('open');
});
// when the modal closed
photo.on('close',function(){
    console.log('close');
});
// when all images are loaded
photo.on('loadall',function(){
    console.log('loadall');
});
// when photo is changed
photo.on('change',function(){
    console.log('change');
});
// when swipe started
photo.on('swipestart',function(){
    console.log('swipestart');
});
// when swipe ended
photo.on('swipeend',function(){
    console.log('swipeend');
});
// when zoomed in
photo.on('zoomin',function(){
    console.log('zoomin');
});
// when zoomed out
photo.on('zoomout',function(){
    console.log('zoomout');
});                  
                

SmartPhoto响应式图片插件的github地址为:https://github.com/appleple/SmartPhoto

网友评论