用photoswipe实现朋友圈查看图片效果

.text{ float: left; text-align: left; padding-left: 10px;width:99%;}
.text .my-gallery{ overflow: hidden;}
.text .my-gallery div{ width: 31%; overflow: hidden; float: left; margin-top: 5px;margin-right: 5px; }
.text .my-gallery .photoswipeli{width:98%; overflow: hidden; float: left; margin-top: 5px;margin-right: 5px; }
.text .my-gallery img{  }
.text .title{ color: #576788; font-size: 1.8rem;}
.text .txt{color: #323232; font-size: 1.5rem;}
.text .tm{font-size: 1.4rem;    overflow: hidden;}
.text .tm .fl{float: left;  padding-left: 5px;}
.text .tm .fr{float: right; padding-right: 15px;}
.text .cmt{ color: #444444; font-size: 1.5rem;    background-color: #eeeeee; margin-top: 5px; padding: 5px;}
.text .cmt .fav{ color: #576788; border-bottom: 1px solid #d5d5d5; padding-bottom: 5px;}
.text .cmt span{ color: #576788;}
figure{
 -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
}

以上代码是小图展示区域的样式。

底层的组件引用请去这里下载

https://github.com/dimsemenov/photoswipe

<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <!-- Background of PhotoSwipe.
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>
    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">
        <!-- Container that holds slides.
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <!--  Controls are self-explanatory. Order can be changed. -->
                <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>
                <!-- element will get class pswp__preloader-active when preloader is running -->
                <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>之前，以上代码用户承载大图片的展示。

<div class="row text mrg0">
              <div class="col-xs-12 text-left pad0 my-gallery" data-pswp-uid="1">
                {volist name="picarry" id="vo" key="k" }
                    <figure>
                      <div {if $count eq 1}class="photoswipeli"{/if}><a href="https://qd.andiff.net/{$vo.picurl}" data-size="{$vo.width}x{$vo.height}" />
                        <img style="{$vo.style}" src="https://qd.andiff.net/{$vo.picurl}" /></a></div>
                        <figcaption style="display:none;"></figcaption>
                    </figure>
                {/volist}
              </div>
          </div>

以上代码是循环读取图片，figcaption的意义是在展示大图的时候，显示的图片说明文字。样式photoswipli的意义是当图片只有一张的时候，占的宽度大一些。默认的宽度是28%。

备注：一般上传图片是不需要保存图片的宽度和高度的，但是显示大图的时候，你必须指定大图的宽度和高度，那么如何处理，如果是又拍云上面的图片，那么用这种方法  图片地址!/info  如果是本地图片 getimagesize(图片地址);

      <script type="text/javascript" src="/assets/js/frontend/photoswipe.js"></script>
      <script type="text/javascript" src="/assets/js/frontend/photoswipe-ui-default.js"></script>
      <script type="text/javascript">
        	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 = {};
                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
            var galleryElements = document.querySelectorAll( gallerySelector );
            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();
            if(hashData.pid && hashData.gid) {
                openPhotoSwipe( hashData.pid ,  galleryElements[ hashData.gid - 1 ], true, true );
            }
        	};
        	// execute above function
        	initPhotoSwipeFromDOM('.my-gallery');
        	$(".my-gallery>figure>div").each(function(){
        		  $(this).height($(this).width());
        	});
        	function more(obj,id) {
              if ($('#txt'+id).is(":hidden")) {
                  $('#p'+id).hide();
                  $('#txt'+id).show();
                  obj.innerHTML='收起';
              } else {
                  $('#p'+id).show();
                  $('#txt'+id).hide();
                  obj.innerHTML='全文';
              }
         	}
        </script>