原创SmartPhoto手机/电脑端查看图片插件使用说明文档

Javascript 766 0 2023-05-12

SmartPhoto手机/电脑端查看图片插件使用说明文档

SmartPhoto,官方是这样说的:最好用的响应式图像查看器,尤其适用于移动设备。

官方网址:https://appleple.github.io/SmartPhoto/

其实嘛,这个插件整体功能不是很多,只是基本的对图片进行放大缩小下一张等。不过这已经完全满足我的需求了。

此插件也提供npm或者yarn的方式安装,当然也提供与jquery搭配使用。

安装方式:

npm安装:npm install smartphoto --save

yarn安装:yarn add smartphoto

直接引入:

<link rel="stylesheet" href="https://unpkg.com/smartphoto@1.1.0/css/smartphoto.min.css">

<script src="https://unpkg.com/smartphoto@1.1.0/js/smartphoto.min.js"></script>


使用实例:

HTML代码:

<a href="./assets/images/large-kuma.jpg" class="js-smartPhoto" data-caption="bear" data-id="bear" data-group="animal"/>
  <img src="./assets/images/kuma.jpg" />
</a>
<a href="./assets/images/large-rakuda.jpg" class="js-smartPhoto" data-caption="camel" data-id="camel" data-group="animal"/>
  <img src="./assets/images/rakuda.jpg" />
</a>
<a href="./assets/images/large-lion.jpg" class="js-smartPhoto" data-caption="lion" data-id="lion" data-group="animal"/>
  <img src="./assets/images/lion.jpg" />
</a>

参数说明:

data-caption:图片描述

data-id:图片唯一ID

data-group:图片分组,同一组图片直接滑到下一张


JS代码:
//原生JS方式使用
window.addEventListener('DOMContentLoaded',function(){
    new SmartPhoto(".js-smartPhoto");
});

//jquery方式使用
$(function(){
    $(".js-smartPhoto").SmartPhoto();
});


其它功能使用如下:

<script>
	document.addEventListener('DOMContentLoaded', function () {
		/*
		//API参数使用
		var mySmartPhoto = 	new SmartPhoto(".js-smartPhoto", {
			arrows: false, //是否显示上一张/下一张箭头,默认:true
			nav: false, //是否显示底部导航缩略图,默认:true
			useOrientationApi: false, //是否使用加速计移动图像,默认:true
			resizeStyle: 'fit', //调整图像大小以填充(fill)/适应(fit)屏幕,默认值:fill
			animationSpeed: 500, //切换图片动画速度,默认:300
			forceInterval: 5 //对图像应用频率,默认:10
		});
		*/

		/*
		//方法使用
		var mySmartPhoto = 	new SmartPhoto(".js-smartPhoto");
		mySmartPhoto.zoomPhoto(); //放大
		mySmartPhoto.zoomOutPhoto(); //缩小
		mySmartPhoto.gotoSlide(6); //滑到第6张图片
		mySmartPhoto.addNewItem(element); //添加新的图片
		*/
		
		/*
		//事件使用
		var mySmartPhoto = 	new SmartPhoto(".js-smartPhoto");
		mySmartPhoto.on('open',function(){
			console.log('打开预览时响应');
		});
		mySmartPhoto.on('close',function(){
			console.log('关闭预览时响应');
		});
		mySmartPhoto.on('loadall',function(){
			console.log('加载完所有图像时响应');
		});
		mySmartPhoto.on('change',function(){
			console.log('图片更换时响应');
		});
		mySmartPhoto.on('swipestart',function(){
			console.log('滑动开始时响应');
		});
		mySmartPhoto.on('swipeend',function(){
			console.log('滑动结束时响应');
		});
		mySmartPhoto.on('zoomin',function(){
			console.log('图片放大时响应');
		});
		mySmartPhoto.on('zoomout',function(){
			console.log('图片缩小时响应');
		});
		*/

	});
</script>

说明:以上代码已被注释,如需要哪段代码请去掉注释即可。

上一篇:FCUP-大文件切片上传js插件

下一篇:js格式化日期时间,或是时间戳-日期互相转换

讨论数量:0

请先登录再发表讨论。 2024-06-14

天涯网魂
3 杠 5 星
TA 的文章
TA 的随言
TA 的资源链