基于jQuery窗口的照片查看器插件

基于jQuery窗口的照片查看器插件

photoviewer.js是一款基于窗口的照片查看器jQuery插件。该插件可以对一组图片生成预览,并将图片放置在一个窗口中,该窗口可以自由拖动,缩放,里面的图片可以缩放、旋转等。

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 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结构如下。

1
2
3
4
5
6
7
8
9
<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>

初始化插件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$('[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结构如下。

1
2
3
4
5
6
7
8
9
<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>

或者:

1
2
3
<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">

初始化插件:

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

创建消息通知

初始化插件:

1
2
3
4
new jBox('Notice', {
    content: 'Hurray! A notice!',
    color: 'blue'
});
当前内容只有登录了才能查看,如果您已经注册,请登录
1

发表评论