素材牛VIP会员

JavaScript图片查看器PhotoViewer [原创]

 所属分类:网页特效-图片特效,悬浮层/弹出层

 浏览:3879次  评论:0次  更新时间:2019-01-18
牛币素材VIP可免积分下载
JavaScript图片查看器PhotoViewer [原创]兼容IE9
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
项目地址(website):https://github.com/nzbin/photoviewer
素材描述:仿Windows图片查看器纯JavaScript版

详细介绍

PhotoViewer

PhotoViewer是一个JS插件,可以像在Windows中一样查看图像。

主要特点

  • Vanilla JS

  • 浏览器支持IE9 +

  • 模态可拖动

  • 模态可调整大小

  • 模态最大化

  • 图像可移动

  • 图像可缩放

  • 图像可旋转

  • 键盘控制

  • 全屏显示

  • 多个实例

基本用法

第1步:包含文件

<!--核心CSS文件 -->
<link href="/path/to/photoviewer.css" rel="stylesheet">
<!--核心JS文件 -->
<script src="/path/to/photoviewer.js"></script>

第2步:初始化

photoviewer的用法非常简单,PhotoViewer构造函数有2个参数。

包含图像信息对象的数组。

选项

//构建图像数组
var items = [
    {
        src: 'path/to/image1.jpg', // 图像路径
        title: 'Image Caption 1' //如果你跳过它,会显示原始图像名称
    },
    {
        src: 'path/to/image2.jpg',
        title: 'Image Caption 2'
    }
];
//定义选项(如果需要)
var options = {
    // optionName: 'option value'
    // 例如:
    index: 0 // 此选项表示您将从第一张图片开始
};
//初始化插件
var viewer = new PhotoViewer(items, options);

第3步:绑定事件

最后,在初始化时绑定按钮元素上的click事件。

文件目录结构

  • dist
    • ┝ photoviewer.common.js
    • ┝ photoviewer.css
    • ┝ photoviewer.esm.js
    • ┝ photoviewer.js
    • ┝ photoviewer.min.css
    • ┝ photoviewer.min.js
  • docs
    • css
      • ┝ docs.css
      • ┝ photoviewer.css
      • ┝ snack-helper.css
      • ┝ snack.css
    • img
      • ┝ a1.png
      • ┝ a2.png
      • ┝ a3.png
      • ┝ a4.png
      • ┝ a5.png
      • ┝ a6.png
    • ┝ index.html
    • js
      • ┝ photoviewer.js
      • vendor
        • ┝ jquery-1.12.4.min.js
        • ┝ modernizr-2.8.3.min.js
  • src
    • js
      • ┝ constants.js
      • ┝ core.js
      • ┝ defaults.js
      • ┝ domq.js
      • ┝ draggable.js
      • ┝ movable.js
      • ┝ resizable.js
      • ┝ utilities.js
    • sass
      • ┝ photoviewer.scss
      • ┝ _fullscreen.scss
      • ┝ _general.scss
      • ┝ _helpers.scss
      • ┝ _resizable.scss

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:5 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)