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
查看如下隱藏內容里的“提取碼”：
關注公眾號，發送消息“查看密碼”，輸入系統回復的“查看密碼”,點擊“確定”按鈕，即可看到“提取碼”。
