JQUERY插件-响应式Photoviewer.js图片查看器jQuery插件

Photoviewer。js是一个基于窗口的照片查看器jQuery插件。插件可以生成一组图像的预览,并将图像放置在可以自由拖动,缩放的窗口中,并且内部的图像可以缩放、旋转。

使用方法

在页面中引入photoviewer.css、jquery和photoviewer.js文件。

<link href="dist/photoviewer.css" rel="stylesheet">
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/photoviewer.js"></script>

初始化插件

使用photoviewer非常简单,通过下面的方法来初始化即可。

// build images array
var items = [
{
src: 'path/to/image1.jpg', // path to image
caption: 'Image Caption 1' // If you skip it, there will display the original image name(image1)
},
{
src: 'path/to/image2.jpg',
caption: 'Image Caption 2'
}
];

// define options (if needed)
var options = {
// optionName: 'option value'
// for example:
index: 0 // this option means you will start at first image
};

// Initialize the plugin
var viewer = new PhotoViewer(items, options);

最后通过一个按钮来触发打开photoviewer即可。
使用超链接创建

HTML DOM结构如下:

<a data-gallery="manual" href="big-1.jpg">
<img src="small-1.jpg">
</a>
<a data-gallery="manual" href="big-2.jpg">
<img src="small-2.jpg">
</a>
<a data-gallery="manual" href="big-3.jpg">
<img src="small-3.jpg">
</a>

初始化插件:

$('[data-gallery=manual]').click(function (e) {

e.preventDefault();

var items = [],
// get index of element clicked
options = {
index: $(this).index()
};

// looping to create images array
$('[data-gallery=manual]').each(function () {
let src = $(this).attr('href');
items.push({
src: src
});
});

new PhotoViewer(items, options);

});

作为jQuery插件来使用

HTML DOM结构如下:

<a data-gallery="manual" href="big-1.jpg">
<img src="small-1.jpg">
</a>
<a data-gallery="manual" href="big-2.jpg">
<img src="small-2.jpg">
</a>
<a data-gallery="manual" href="big-3.jpg">
<img src="small-3.jpg">
</a>

或者:

<img data-gallery="jquery" data-src="big-1.jpg" src="small-1.jpg">
<img data-gallery="jquery" data-src="big-2.jpg" src="small-2.jpg">
<img data-gallery="jquery" data-src="big-3.jpg" src="small-3.jpg">

初始化插件:

$('[data-gallery=jquery]').photoviewer(options);

创建消息通知

初始化插件:

new jBox('Notice', {
content: 'Hurray! A notice!',
color: 'blue'
});

GitHub地址:https://github。com/nzbin/photoviewer

在线预览

查看如下隐藏内容里的“提取码”:

关注公众号关注公众号
关注公众号,发送消息“查看密码”,输入系统回复的“查看密码”,点击“确定”按钮,即可看到“提取码”。

发表评论

彩都会彩票网 河北快3 诚信彩票充值中心 盈多多彩票官网 江苏快3官网 江苏快3官网 凤凰彩票充值中心 118彩票官网 彩70充值 江苏快3官网