photoSwipe 结合jquery使用

photosSwipe是一个移动端的画廊插件，在使用时感觉偏复杂了，于是写了一个jquery插件调用。

插件代码如下

/**
 * jquery photoSwipe
 * Created by wuxp on 2017/4/13.
 */
(function ($) {/**
     * @param options    配置
     * @callBack         画廊渲染成功回调函数
     * @param holdState  在图片预览状态下刷新页面是否保持展开状态
     * @param hasUseDefTem  是否使用默认的html结构
     */
    $.fn.photoSwipe = function (options, callBack, holdState, hasUseDefTem) {//var photoSwipes=[];
        if (hasUseDefTem !== false) {buildContainer();}var $galleryElements = $(this);$galleryElements.each(function (index) {var $gallery = $(this);$gallery.data('pswp-uid', index);//点击图片打开photoSwipe
            $gallery.find("[data-photo]").click(function (event, data) {event = event || window.event;event.preventDefault ? event.preventDefault() : event.returnValue = false;var $self = $(this);openPhotoSwipe(callBack, $self.index(), $gallery);return false;});});//在打开图片预览的情况下刷新页面，则默认打开
        var hashData = photoSwipeParseHash();  //计算打开的画廊位置和图片位置
        if (holdState === false) {return;}if (hashData.pid !== undefined && hashData.gid !== undefined) {//如果url中有pid和gid则打开该图片的预览
            openPhotoSwipe(callBack, hashData.pid, $galleryElements.eq(hashData.gid), true, true);}//  return photoSwipes;
    }/**
     * 解析图片索引和URL库指数（# PID = 1和GID = 2）
     * @returns {{}}
     */
    var photoSwipeParseHash = function () {var hash = window.location.hash.substring(1),params = {};if (hash.length < 5) {return params;}var vars = hash.split('&');for (var i = 0; i < vars.length; i++) {if (!vars[i]) {continue;}var pair = vars[i].split('=');if (pair.length < 2) {continue;}params[pair[0]] = pair[1];}if (params.gid) {params.gid = parseInt(params.gid, 10);}return params;};/**
     * 打开photoSwipe
     * @param callBack          画廊渲染成功回调函数
     * @param index             点击元素在当前画廊的序号
     * @param $gallery          画廊容器元素
     * @param disableAnimation  不启用动画
     * @param fromURL
     */
    var openPhotoSwipe = function (callBack, index, $gallery, disableAnimation, fromURL, opts) {var pswpElement = document.querySelectorAll('.pswp')[0],gallery,options,items;items = parseThumbnailElements($gallery);// define options (if needed)
        options = {// define gallery index (for URL)
            galleryUID: $gallery.data('pswp-uid'),getThumbBoundsFn: function (index) {// See Options -> getThumbBoundsFn section of documentation for more info
                var $container = items[index].el;var thumbnail = $container.find('img').eq(0), // find thumbnail
                    pageYScroll = window.pageYOffset || document.documentElement.scrollTop,rect = thumbnail[0].getBoundingClientRect();return {x: rect.left, y: rect.top + pageYScroll, w: rect.width};}};$.extend(options, opts);// PhotoSwipe opened from URL
        if (fromURL) {if (options.galleryPIDs) {// parse real index when custom PIDs are used
                // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
                for (var j = 0; j < items.length; j++) {if (items[j].pid == index) {options.index = j;break;}}} else {// in URL indexes start from 1
                options.index = parseInt(index, 10) - 1;}} else {options.index = parseInt(index, 10);}// exit if index not found
        if (isNaN(options.index)) {return;}if (disableAnimation) {options.showAnimationDuration = 0;}//console.log(options);

        // Pass data to PhotoSwipe and initialize it
        gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);gallery.init();if ($.isFunction(callBack)) {callBack(gallery);}};/**
     * 获取items配置
     * @param $gallery 容器元素
     * @returns {Array}
     */
    var parseThumbnailElements = function ($gallery) {var items = [];  //图片items

        $gallery.find("[data-photo]").each(function () {var $self = $(this);var $img = $self.find("img");var bigSrc = $img.data("big");  //大图url
            var mSrc = $img.prop("src");      //小图url
            var title = $self.data("title");   //标题
            if (bigSrc === undefined || bigSrc.length === 0) {//如果未配置大图url则使用原图
                bigSrc = mSrc;}var sizes;var sizeStrings = $self.data("size");if (sizeStrings != undefined && sizeStrings.length > 0 && sizeStrings.indexOf("x") > 0) {sizes = sizeStrings.split("x"); //宽高
            } else {sizes = [];var imageWidth = $img.width();var imageHeight = $img.height();sizes[0] = $(window).width();     //默认宽等于全屏
                sizes[1] = imageWidth / imageHeight * sizes[0];  //计算高
            }items[items.length] = {src: bigSrc,msrc: mSrc,w: parseInt(sizes[0], 10),h: parseInt(sizes[1], 10),title: title,el: $self
            }});
//        console.log(items);
        return items;};var buildContainer = function () {

        if ($("div.pswp[data-photoswipe='1']").length > 0) {return;}

        var html = '<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"><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__share-modal pswp__share-modal--hidden pswp__single-tap"><div class="pswp__share-tooltip"></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>';        $("body").append($(html));    }})(jQuery);

调用截图

img标签外层使用data-photo标记

js代码调用

关键代码 data-big存放大图，data-title存放标题文本内容

其他的可以看代码，逻辑比较简单

photoSwipe 结合jquery使用相关推荐

pc端jquery左右按钮控制带缩略图的图片切换代码_Web开发实用的图片预览插件，简单零依赖——PhotoSwipe...
介绍 PhotoSwipe是一个JavaScript库,没有依赖项.要说唯一的依赖项那就是Vanilla.js(原生js),因此你可以在你的任何Web项目中使用,包括主流的Vue.React.Angu ...
2011年的32有用的jQuery插件
jQuery插件真正为开发人员很有帮助,今天分享的插件有很多你没有见到过的,但是非常实用的.这32个有用的的插件对你的开发很有帮助.如果你喜欢这些jQuery插件,记得收藏, JQUERY插件 jRu ...
推荐15款响应式的 jQuery Lightbox 插件
利用现代 Web 技术,网络变得越来越轻巧与.模态框是突出展现内容的重要形式,能够让用户聚焦到重要的内容上去.在这个列表中,我们编制了15款响应式的 jQuery 灯箱库,这将有助于开发人员创建和设计 ...
推荐8个最佳的jQuery移动开发插件
这篇文章,我们将介绍与共享jQuery的一些最好的移动插件去开发移动应用.正如我们在过去所说的文章 - jQuery是流行的JavaScript库,你可以在Web项目中包含这个库,您将可以更容易和更高 ...
10款非常有效的帮助你设计超酷响应式布局的jQuery插件
日期:2012/02/24 来源:GBin1.com 如果你关注最近几年的web设计,那么响应式布局(responsive layout)设计对于你来说肯定不是一个陌生的词汇. 相对于传统的页面设 ...
用PhotoSwipe制作相册，手势可放大
1.引入css和js <link href="css/photoswipee.css" rel="stylesheet" type="text/ ...
php实现跑马灯闪亮,JavaScript_基于jquery实现的文字向上跑动类似跑马灯的效果，想实现一个类似跑马灯的效果, - phpStudy...
基于jquery实现的文字向上跑动类似跑马灯的效果想实现一个类似跑马灯的效果,发现跑马灯有空格.效果也不美观,于是用jquery写了个页面代码恭喜187****5204获得1000RBM 恭喜1 ...
使用photoswipe展示图片
做一个移动web功能,需要展示多张图片,在网上找了一些资料,学着使用了photoswipe.初次使用,可能没有用到精髓,好在功能实现了.在此做一个记录,以备后期查看. 在官方的代码上删除了一些功能.每 ...
PhotoSwipe简介-专为移动触摸设备设计的相册/画廊.兼容所有iPhone、iPad、黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产品
官方介绍 PhotoSwipe 是专为移动触摸设备设计的相册/画廊.兼容所有iPhone.iPad.黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产 ...

photoSwipe 结合jquery使用

photoSwipe 结合jquery使用相关推荐

最新文章

热门文章