欢迎投稿

菜鸟之家

当前位置:菜鸟之家 > jquery库 > 工具类 > jQuery基于窗口的照片查看器插件

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

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

关键词:图片查看器,照片查看器,photoviewer,Windows照片查看器,模态窗,拖拽,缩放,旋转,平移,最大化,lightbox,jquery库,gongjulei

描述: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"
});
                

该jQuery基于窗口的照片查看器插件的github网址为:https://github.com/nzbin/photoviewer

说明:菜鸟之家所有素材均是用户自行上传分享并拥有版权或使用权,仅供网友学习交流,未经上传用户书面授权,请勿作他用。若您的权利被侵害,请联系QQ:11809283或发送邮件至11809283@qq.com。

菜鸟之家承诺:本站所有资源,无需注册,免费下载,无病毒,无弹窗,无干扰链接!

转载请注明出处!本文地址:http://www.jeeok.com/jquery_gongjulei/9610.html

 在线演示  免费下载
编号:201903070000009610
大小:0.13MB
上传时间:2019-03-13 08:01
素材由用户"gfswfd"上传分享。

标签

最新推荐素材

与jQuery基于窗口的照片查看器插件相关的素材

.