photoswipe之图片浏览应用

最新推荐文章于 2024-03-14 11:52:18 发布

kirsten_z

最新推荐文章于 2024-03-14 11:52:18 发布

阅读量867

点赞数

分类专栏： jquery 文章标签：移动插件

本文链接：https://blog.csdn.net/kirsten_z/article/details/76190338

版权

jquery 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

1、说明
适用于移动端，点击图片放大，再次点击缩小，类似微信朋友圈浏览图效果
2、示例
注：本示例使用php语法
1）html代码片段
test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <title>图片浏览</title>
    <meta name="description" content="图片浏览"/>
    <meta name="keywords" content="图片浏览"/>
    <link type="text/css" rel="stylesheet" href="style.css?v=1"/>
    <script src="js/jquery.js"></script>
    <link href="photoswipe/css/photoswipe.css" rel="stylesheet" />
    <link href="photoswipe/css/default-skin.css" rel="stylesheet" />
    <script src="photoswipe/js/photoswipe.min.js"></script>
    <script src="photoswipe/js/photoswipe-ui-default.min.js"></script>
    <script src="photoswipe/js/jquery.transit.js"></script>
    <script src="photoswipe/js/hammer.js"></script>
    <script src="photoswipe/js/jquery.hammer.js"></script>
</head>
<body>
    <div class="wrapper">
        <div class="main">
            <div class="load_box">
                <div class="load_pic" id="imgbox">
                    <img class="load_img" src="img/Chrysanthemum.jpg">
                    <img class="load_img" src="img/Desert.jpg">
                    <img class="load_img" src="img/Hydrangeas.jpg">
                    <img class="load_img" src="img/Koala.jpg">
                </div>  
            </div>
        </div>

        <!-- 图片弹出模态框 -->
        <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="pswp__bg"></div>
            <div class="pswp__scroll-wrap">
                <div class="pswp__container">
                    <div class="pswp__item"></div>
                    <div class="pswp__item"></div>
                    <div class="pswp__item"></div>
                </div>
                <div class="pswp__ui pswp__ui--hidden">
                    <div class="pswp__top-bar" style="opacity:0;">
                        <div class="pswp__counter"></div>
                        <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                        <button class="pswp__button pswp__button--share" title="Share"></button>
                        <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                        <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                        <div class="pswp__preloader">
                            <div class="pswp__preloader__icn">
                                <div class="pswp__preloader__cut">
                                    <div class="pswp__preloader__donut"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="pswp__loading-indicator">
                        <div class="pswp__loading-indicator__line"></div>
                    </div>
                    <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                        <div class="pswp__share-tooltip">
                            <a href="#" class="pswp__share--facebook"></a>
                            <a href="#" class="pswp__share--twitter"></a>
                            <a href="#" class="pswp__share--pinterest"></a>
                            <a href="#" download class="pswp__share--download"></a>
                        </div>
                    </div>
                    <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
                    <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
                    <div class="pswp__caption">
                        <div class="pswp__caption__center"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 图片弹出模态框 -->
        <script type="text/javascript">
            (function() {//获取图片原始尺寸
                // 读取尺寸大小
                var imgReady = (function () {
                    var list = [], intervalId = null,
                        // 用来执行队列
                        tick = function () {
                            var i = 0;
                            for (; i < list.length; i++) {
                                list[i].end ? list.splice(i--, 1) : list[i]();
                            };
                            !list.length && stop();
                        },
                        // 停止所有定时器队列
                        stop = function () {
                            clearInterval(intervalId);
                            intervalId = null;
                        };
                    return function (url, ready, load, error) {
                        var onready, width, height, newWidth, newHeight,img = new Image();
                        img.src = url;
                        // 如果图片被缓存，则直接返回缓存数据
                        if (img.complete) {
                            ready.call(img);
                            load && load.call(img);
                            return;
                        };
                        width = img.width;
                        height = img.height;
                        img.onerror = function () {
                            error && error.call(img);
                            onready.end = true;
                            img = img.onload = img.onerror = null;
                        };
                        // 图片尺寸就绪
                        onready = function () {
                            newWidth = img.width;
                            newHeight = img.height;
                            if (newWidth !== width || newHeight !== height || newWidth * newHeight > 1024){
                                // 如果图片已经在其他地方加载可使用面积检测
                                ready.call(img);
                                onready.end = true;
                            };
                        };
                        onready();
                        // 完全加载完毕的事件
                        img.onload = function () {
                            // onload在定时器时间差范围内可能比onready快
                            // 这里进行检查并保证onready优先执行
                            !onready.end && onready();
                            load && load.call(img);
                            // IE gif动画会循环执行onload，置空onload即可
                            img = img.onload = img.onerror = null;
                        };
                        // 加入队列中定期执行
                        if (!onready.end) {
                            list.push(onready);
                            // 无论何时只允许出现一个定时器，减少浏览器性能损耗
                            if (intervalId === null) intervalId = setInterval(tick, 40);
                        };
                    };
                })();
                //自定义——将其他图片做成这种形式
                $("div#imgbox .load_img").each(function(index, el) {
                    var self = $(this);
                    imgReady($(this).attr("src"), function () {
                        $(self).wrap('<div class="gallery"><a href="'+$(self).attr("src")+'" data-size="'+this.width+"x"+this.height+'" data-med="'+$(self).attr("src")+'" data-med-size="'+this.width+"x"+this.height+'" style="z-index:1000;"></div>');
                    });
                });
            })();
        </script>
        <script src="photoswipe/js/initPhotoSwipeFromDOM.js"></script>
        <script>initPhotoSwipeFromDOM('.gallery');</script>
    </div>
</body>
</html>

2）css样式
style.css

@charset "utf-8";
/* CSS Document */

body{ font:15px/25px "Microsoft YaHei","微软雅黑";  background-color:#fff; word-wrap:break-word;max-width: 750px;margin: 0 auto;position: relative;}
*{ margin:0; padding:0; -webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-overflow-scroll:touch;}
ul,ol,li{ list-style:none outside;}
.nowrap{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
a{ color:#fff; text-decoration:none;}
a:hover{ text-decoration:none;}
img{ border:medium none; vertical-align:middle;}
textarea{ resize:none; vertical-align:middle;}
input,button,select,textarea{ -webkit-appearance:none; border:medium none; background:none; outline:none; font:1em/normal "Microsoft YaHei","微软雅黑";}
.align_right{text-align: right;}
.align_center{text-align: center;}
.block{display: block;}

.wrapper{-webkit-background-size:100% 100%;color:#fff;}

.load_box{width: 74%;margin-top: 68px;}
.load_pic{display: -webkit-box;}
.load_pic img{width: 84px;height: 84px; padding-right: 10px;}

3）效果如下图

未点击前

这里写图片描述

点击其中一张图片

这里写图片描述

再次点击

这里写图片描述

photoswipe插件下载：http://www.photoswipe.com/

kirsten_z

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
photoswipe之图片浏览应用

1、说明适用于移动端，点击图片放大，再次点击缩小，类似微信朋友圈浏览图效果 2、示例注：本示例使用php语法 1）html代码片段 test.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
复制链接

扫一扫