移动端使用photoswipe实现图片放大

最新推荐文章于 2023-11-10 11:36:11 发布

原创

最新推荐文章于 2023-11-10 11:36:11 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了如何在移动端利用PhotoSwipe插件实现图片的全屏查看。通过引入必要的CSS和JS文件，设置HTML结构，并编写JavaScript代码来解析图片数据，用户可以创建一个响应式的图片浏览体验。文章还提供了完整的HTML代码示例。

PhotoSwipe插件官方网站 http://www.photoswipe.com/

页面中需要引入如下文件：photoswipe.css，default-skin.css，photoswipe.js，photoswipe-ui-default.min.js

html部分

这段代码用于显示放大图片

html部分

<div class="my-gallery" data-pswp-uid="1">
     <figure>
         <div class="img-dv"><a href="img/img1-big.jpg" data-size="1920x1080"><img src="img/img1.jpg"></a></div>
         <figcaption style="display:none;">在这里可增加图片描述</figcaption>
     </figure>
</div>

完整代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>photoswipe的使用</title>
<link rel="stylesheet prefetch" href="css/photoswipe.css">
<link rel="stylesheet pre

最低0.47元/天解锁文章