现今，网站中使用媒体文件已经很普遍了，其中包括图片、视频、音频等。那么当我们需要在网站中展示这些媒体文件时，如何做到让它更美观、易用呢？答案就是使用图片预览库。在这里，我们介绍一款将官方媒体库整合成一张功能完善的图片预览库npm包 media-viewer 。
安装 media-viewer
使用 npm 在项目中安装 media-viewer
npm install media-viewer
快速上手
在 HTML 页面中引入 CSS 和 JS。
<link rel="stylesheet" href="/path/to/media-viewer.css" /> <script src="/path/to/media-viewer.js"></script>
对于图片预览，我们需要在页面中插入一个图片链接。这个链接的 data-media-viewer-src 属性指定了原始的图片地址， data-media-viewer-group 属性作为组别ID，在multiple at same page的时候，会将同组的图片连续预览，data-media-viewer-desc 属性作为image alt/title。
<img src="thumbnails/1.jpg" alt="thumbnail" data-media-viewer-src="images/1.jpg" data-media-viewer-group="group1" data-media-viewer-desc="Description 1" />
在脚本中初始化图片预览：
var viewer = new MediaViewer('.thumbnail', { selector: 'img', urlAttribute: 'data-media-viewer-src', groupAttribute: 'data-media-viewer-group', descAttribute: 'data-media-viewer-desc' });
现在，当用户单击图片时，就可以在当前页面中展示原始的图片。同时，用户还可以滚动整个页面翻转预览。
API
MediaViewer(options)
创建一个新的 MediaViewer 实例。
var options = { }; var viewer = new MediaViewer(selector, options);
selector: 用于获取要实例化的元素（必填）,能够通过querySelector获得的选择器均可,例如.>，#>等options: 配置选项。
这个方法接受一个对象作为参数，具有以下属性：
selector(必填): 要实例化的 DOM 元素的选择器字符串。urlAttribute: 包含图像 URL 的 DOM 元素上的属性名称。默认为data-media-viewer-src。groupAttribute: 图片分组的 DOM 元素上的属性名称。默认为data-media-viewer-group。descAttribute: 图片描述的 DOM 元素上的属性名称。默认为data-media-viewer-desc。
viewer.view(index)
显示具有给定索引的图像。
viewer.view(0);
index(必填): 要显示的图像的索引。
viewer.prev()
显示当前正在显示的图像的上一个图像。
viewer.prev();
viewer.next()
显示当前正在显示的图像的下一个图像。
viewer.next();
示例代码
在这个示例中，我们将使用media-viewer在页面上实现图片预览效果。在这里，我们有四张图片，用户可以单击其中任意一张图片预览原始的图片。点击左右箭头图片可以上一页或者下一页，同时你还可以快速预览每张图片。
-- -------------------- ---- ------- --------- ----- ------ ------ ----- --------------- -- ------------------- ------------ ----- ---------------- ------------------------- -- ------ ---------------- ---------- - ---------- ------ ------- - ----- -------- - ----- --------- --------- ----------- ------- - ---------- -- - ------------ ----- ---------- ---- ------ ----- - --------------- - ----------- ----- -------- ----- ---------- ----- ---------------- ------- - --------------- -- - ------ ------ ------- ------ ------- ----- --------- ------- -------------- ---- ----------- - - --- ----- --------- --------- ------- -------- - --------------- -- --- - ------ ----- ------- ----- ----------- ------ -------- ---- ----------- ------- ----- - --------------- -- --------- - -------- -- - ----------- - ----------------- ------- -- -- ----- ------ ------ --------- --------- ------- -- ----- -- ------ ----- -------- ---- - ------ ----- - --------- --------- ---- ---- ----------- ------ ------ ----- ------- ----- -------------- ---- ----------------- ------- -- -- ----- ------ ------ ---------- ---- ----------- ------- ------- -------- - ----- - ----- ----- - ----- - ------ ----- - -------------- - ----------------- ------- -- -- ----- ------ ------ ---------- ---- -------- ---- ------- -------- - -------------- - -------------- - ------------ ----- - -------------------- - -------- -- - -------- ------- ------ ---- ------------------ ---------------- --------- --- ----------------------- ---- ---- -------------------- -------------- -- -------------------------------------- -------------------------------- ---------------------------------- -- ---- ---------------------------------- ----- ---- ---- -------------------- -------------- -- -------------------------------------- -------------------------------- ------------------------------- -- ---- ------------------------------- ----- ---- ---- -------------------- -------------- -- -------------------------------------- -------------------------------- ------------------------------- -- ---- ------------------------------- ----- ---- ---- -------------------- -------------- -- -------------------------------------- -------------------------------- ------------------------------ -- ---- ------------------------------ ----- ----- ---- --------- ---------------------- ---- ------ ---- --------- ---------------------- ---- ------ ------ ------- --------------------------------- ------- ----------------------- --- ------ - --- ------------------------------ - --------- ----- ------------- ------------------------ --------------- -------------------------- -------------- ------------------------ --- --- ------- - -------------------------------- --- ------- - -------------------------------- --------------------------------- ---------- - -------------- --- --------------------------------- ---------- - -------------- --- --------- ------- -------展开代码
总结
通过这个教程，我们介绍了如何使用 media-viewer 这个npm包在网站中实现图片预览功能。我们学习了如何安装、使用 media-viewer，以及如何使用 API 来操作媒体库。
Media-viewer提供了非常多好用的API，我们可以利用这些API完成更加定制化的预览效果。
感谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5d51ab1864dac67109
