vue+photoswipe

其他 2018-11-03 18:00:04 阅读次数: 0

之前pc端时候，点击图片放大功能封装了一个插件。思路是这样的，点击图片时候，获取图片地址，然后获取真实图片的大小，判断下屏幕大小，如果图片大小大于屏幕大小，则图片宽度设为和屏幕宽度一样。如果小于屏幕宽度，则屏幕宽度减去弹出图片的宽度，再除以2居中对齐。高度也是类似。大致思想如此。到手机端时候，需求说每个组里的图片不但能放大，放大后还能左右翻转。好吧，找个插件吧，于是开始了vue+photoswipe.js找坑之路。

好了，废话不多说了

首先引入photoswipe.js和photoswipe-ui-default.min.js 和那段html(<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">),这里我是以组件的形式引入的。代码如下

var enlarge = Vue.extend({
    template: '<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--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>'})
引进这个js文件，并注册。

引入initPhotoSwipeFromDOM这个方法

var initPhotoSwipeFromDOM = function (gallerySelector) {
    // 解析来自DOM元素幻灯片数据（URL，标题，大小...）
    // (children of gallerySelector)
    var parseThumbnailElements = function (el) {
        var thumbElements = el.childNodes,
                numNodes = thumbElements.length,
                items = [],
                figureEl,
                linkEl,
                size,
                item,
                divEl;
        for (var i = 0; i < numNodes; i++) {

            figureEl = thumbElements[i]; // <figure> element

            // 仅包括元素节点
            if (figureEl.nodeType !== 1) {
                continue;
            }
            divEl = figureEl.children[0];
            linkEl = divEl.children[0]; // <a> element

            size = linkEl.getAttribute('data-size').split('x');

            // 创建幻灯片对象
            item = {
                src: linkEl.getAttribute('href'),
                w: parseInt(size[0], 10),
                h: parseInt(size[1], 10)
            };



            if (figureEl.children.length > 1) {
                // <figcaption> content
                item.title = figureEl.children[1].innerHTML;
            }

            if (linkEl.children.length > 0) {
                // <img> 缩略图节点, 检索缩略图网址
                item.msrc = linkEl.children[0].getAttribute('src');
            }

            item.el = figureEl; // 保存链接元素 for getThumbBoundsFn
            items.push(item);
        }

        return items;
    };

    // 查找最近的父节点
    var closest = function closest(el, fn) {
        return el && (fn(el) ? el : closest(el.parentNode, fn));
    };

    // 当用户点击缩略图触发
    var onThumbnailsClick = function (e) {
        e = e || window.event;
        e.preventDefault ? e.preventDefault() : e.returnValue = false;

        var eTarget = e.target || e.srcElement;

        // find root element of slide
        var clickedListItem = closest(eTarget, function (el) {
            return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
        });

        if (!clickedListItem) {
            return;
        }

        // find index of clicked item by looping through all child nodes
        // alternatively, you may define index via data- attribute
        var clickedGallery = clickedListItem.parentNode,
                childNodes = clickedListItem.parentNode.childNodes,
                numChildNodes = childNodes.length,
                nodeIndex = 0,
                index;

        for (var i = 0; i < numChildNodes; i++) {
            if (childNodes[i].nodeType !== 1) {
                continue;
            }

            if (childNodes[i] === clickedListItem) {
                index = nodeIndex;
                break;
            }
            nodeIndex++;
        }



        if (index >= 0) {
            // open PhotoSwipe if valid index found
            openPhotoSwipe(index, clickedGallery);
        }
        return false;
    };

    // parse picture index and gallery index from URL (#&pid=1&gid=2)
    var photoswipeParseHash = function () {
        var hash = window.location.hash.substring(1),
                params = {};
        //console.log("222"+hash);
        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;
    };

    var openPhotoSwipe = function (index, galleryElement, disableAnimation, fromURL) {
        var pswpElement = document.querySelectorAll('.pswp')[0],
                gallery,
                options,
                items;

        items = parseThumbnailElements(galleryElement);

        // 这里可以定义参数
        options = {
            barsSize: {
                top: 100,
                bottom: 100
            },
            fullscreenEl: false,
            shareButtons: [
                {id: 'wechat', label: '分享微信', url: '#'},
                {id: 'weibo', label: '新浪微博', url: '#'},
                {id: 'download', label: '保存图片', url: '{{raw_image_url}}', download: true}
            ],
            // define gallery index (for URL)
            galleryUID: galleryElement.getAttribute('data-pswp-uid'),
            getThumbBoundsFn: function (index) {
                // See Options -> getThumbBoundsFn section of documentation for more info
                var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
                        pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
                        rect = thumbnail.getBoundingClientRect();

                return {x: rect.left, y: rect.top + pageYScroll, w: rect.width};
            }

        };

        // PhotoSwipe opened from URL
        if (fromURL) {
            if (options.galleryPIDs) {
                // parse real index when custom PIDs are used 
                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;
        }

        // Pass data to PhotoSwipe and initialize it
        gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
        gallery.init();
    };

    // loop through all gallery elements and bind events
    //alert(33);
    var galleryElements = document.querySelectorAll(gallerySelector);
    //console.log(galleryElements);
    for (var i = 0, l = galleryElements.length; i < l; i++) {
        galleryElements[i].setAttribute('data-pswp-uid', i + 1);
        galleryElements[i].onclick = onThumbnailsClick;
    }

    // Parse URL and open gallery if it contains #&pid=3&gid=1
    var hashData = photoswipeParseHash();
    //console.log(hashData);
    if (hashData.pid && hashData.gid) {
        openPhotoSwipe(hashData.pid, galleryElements[ hashData.gid - 1 ], true, true);
    }
};

// execute above function
//console.log($(".my-gallery").length);
initPhotoSwipeFromDOM('.my-gallery');

html中加入 

<div class="my-gallery">
                        <figure>
                            <div><a href="http://img.fwxgx.com/uploads/2017/10/15083006520349_24464577.jpg" data-size="500x500"><img style="width: 90%;" src="http://img.fwxgx.com/uploads/2017/10/15083006520349_24464577.jpg"></a></div>
                        </figure>
                        <figure>
                            <div><a href="http://img.fwxgx.com/uploads/2017/10/15083006520349_24464577.jpg" data-size="500x500"><img style="width: 90%;" src="http://img.fwxgx.com/uploads/2017/10/15083006520349_24464577.jpg"></a></div>
                        </figure>
                    </div>

然后打开文件，图片可以放大。你以为这样就玩了吗？然后我把此处放到循环中 

var commentList = Vue.extend({
    template: '<ul class="commentlist">' +
            '<li class="commentlistli" v-for="comlist in comment.list">' +
            '<div class="left wb20"><a class="commenthead"><img :src="jointhead(comlist.avatar)"></a></div>' +
            '<div class="right wb78">' +
            '<p><a class="commentname">{{comlist.user_name}}</a></p>' +
            '<span class="comment" v-html="htmlspecialchars_decode(comlist.comment)"></span>' +
            '<div class="my-gallery" data-pswp-uid="3">' +
            '<figure>' +
            '<div><a href="http://img.fwxgx.com/uploads/2017/10/15083006520349_24464577.jpg" data-size="500x500"><img style="width: 30%;" src="http://img.fwxgx.com/uploads/2017/10/15083006520349_24464577.jpg"></a></div>' +
            '</figure>' +
            '</div>' +
            '</div>' +
            '<div class="clear"></div>' +
            '</li>' +
            '</ul>',
    props: ['comment'],
    methods: {
        jointhead: function (str) {
            if (str.indexOf('http') < 0) {
                return "/" + str;
            } else {
                return str;
            }
        },
        htmlspecialchars_decode: function (str) {
            str = str.replace(/&/g, '&');
            str = str.replace(/</g, '<');
            str = str.replace(/>/g, '>');
            str = str.replace(/"/g, '"');
            str = str.replace(/'/g, '"');
            str = str.replace(/width="40"/g, '');
            str = str.replace(/width=40/g, '');
            str = str.replace(/height="40"/g, '');
            str = str.replace(/height=40/g, '');
            str = str.replace(/width="50"/g, '');
            str = str.replace(/width=50/g, '');
            str = str.replace(/height="50"/g, '');
            str = str.replace(/height=50/g, '');
            return str;
        },
    },
    
})

图片不能放大了！！！

图片不能放大了！！！

这是为什么呢？因为调用

initPhotoSwipeFromDOM('.my-gallery');的时候还没有加载完成。

根据vue的执行过程发现有个updated方法，updated的作用是在data发生变化渲染更新视图之后触发。

于是上面的代码加了一个updated

var commentList = Vue.extend({
    template: '<ul class="commentlist">' +
            '<li class="commentlistli" v-for="comlist in comment.list">' +
            '<div class="left wb20"><a class="commenthead"><img :src="jointhead(comlist.avatar)"></a></div>' +
            '<div class="right wb78">' +
            '<p><a class="commentname">{{comlist.user_name}}</a></p>' +
            '<span class="comment" v-html="htmlspecialchars_decode(comlist.comment)"></span>' +
            '<div class="my-gallery" data-pswp-uid="3">' +
            '<figure>' +
            '<div><a href="http://img.fwxgx.com/uploads/2017/10/15083006520349_24464577.jpg" data-size="500x500"><img style="width: 30%;" src="http://img.fwxgx.com/uploads/2017/10/15083006520349_24464577.jpg"></a></div>' +
            '</figure>' +
            '</div>' +
            '</div>' +
            '<div class="clear"></div>' +
            '</li>' +
            '</ul>',
    props: ['comment'],
    methods: {
        jointhead: function (str) {
            if (str.indexOf('http') < 0) {
                return "/" + str;
            } else {
                return str;
            }
        },
        htmlspecialchars_decode: function (str) {
            str = str.replace(/&/g, '&');
            str = str.replace(/</g, '<');
            str = str.replace(/>/g, '>');
            str = str.replace(/"/g, '"');
            str = str.replace(/'/g, '"');
            str = str.replace(/width="40"/g, '');
            str = str.replace(/width=40/g, '');
            str = str.replace(/height="40"/g, '');
            str = str.replace(/height=40/g, '');
            str = str.replace(/width="50"/g, '');
            str = str.replace(/width=50/g, '');
            str = str.replace(/height="50"/g, '');
            str = str.replace(/height=50/g, '');
            return str;
        },
    },
    updated: function () {
        initPhotoSwipeFromDOM('.my-gallery');
    },
})

再打开果然通过。

猜你喜欢

转载自blog.csdn.net/u010674395/article/details/78627950
vue
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022