PhotoViewer 开源项目使用教程
项目目录结构及介绍
PhotoViewer 项目的目录结构如下:
photoviewer/
├── dist/
│ ├── photoviewer.css
│ ├── photoviewer.js
│ └── photoviewer.min.js
├── src/
│ ├── css/
│ │ └── photoviewer.scss
│ ├── js/
│ │ └── photoviewer.js
│ └── index.html
├── .gitignore
├── LICENSE
├── package.json
├── README.md
└── webpack.config.js
dist/
:包含编译后的 CSS 和 JS 文件,可以直接在项目中使用。src/
:源代码目录,包含项目的 CSS 和 JS 源文件以及示例 HTML 文件。src/css/
:包含项目的 SCSS 文件。src/js/
:包含项目的 JS 文件。index.html
:示例 HTML 文件,展示如何使用 PhotoViewer。.gitignore
:Git 忽略文件配置。LICENSE
:项目许可证文件。package.json
:项目依赖和脚本配置文件。README.md
:项目说明文档。webpack.config.js
:Webpack 配置文件。
项目启动文件介绍
项目的启动文件主要是 src/index.html
,它展示了如何使用 PhotoViewer 插件。以下是 index.html
的主要内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PhotoViewer Demo</title>
<link rel="stylesheet" href="../dist/photoviewer.css">
</head>
<body>
<a href="path/to/image1.jpg" data-gallery="manual">Image 1</a>
<a href="path/to/image2.jpg" data-gallery="manual">Image 2</a>
<script src="../dist/photoviewer.js"></script>
<script>
$('[data-gallery=manual]').click(function (e) {
e.preventDefault();
var items = [];
var options = {
index: $(this).index()
};
$('[data-gallery=manual]').each(function () {
let src = $(this).attr('href');
items.push({ src: src });
});
new PhotoViewer(items, options);
});
</script>
</body>
</html>
在这个文件中,我们引入了 dist/photoviewer.css
和 dist/photoviewer.js
文件,并通过点击链接来初始化 PhotoViewer 插件。
项目配置文件介绍
项目的配置文件主要是 package.json
和 webpack.config.js
。
package.json
package.json
文件包含了项目的基本信息、依赖和脚本配置。以下是主要内容:
{
"name": "photoviewer",
"version": "3.10.2",
"description": "A JS plugin to view images just like in Windows.",
"main": "dist/photoviewer.js",
"scripts": {
"build": "webpack",
"watch": "webpack --watch"
},
"keywords": [
"image-viewer",
"zoomable",
"movable",
"rotatable",
"keyboard",
"fullscreen",
"modal",
"lightbox"
],
"author": "nzbin",
"license": "MIT",
"devDependencies": {
"css-loader": "^5.2.4",
"sass": "^1.32.12",
"sass-loader": "^11.0.1",
"style-loader": "^2.0.0",
"webpack": "^5.36.2",
"webpack-cli": "^4.6.0"
}
}
name
:项目名称。