zoukankan      html  css  js  c++  java
  • PhotoSwipe用法

    1、自动识别data-size问题,添加以下代码

    gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
                        gallery.listen('imageLoadComplete',
                        function (index, item) {
                            var linkEl = item.el.children[0];
    
                            if (!linkEl.getAttribute('data-size') || linkEl.getAttribute('data-size') == 'auto') {
                                var img = new Image();
                                img.src = linkEl.getAttribute('href');
    
                                linkEl.setAttribute('data-size', img.naturalWidth + 'x' + img.naturalHeight);
                                item.w = img.naturalWidth;
                                item.h = img.naturalHeight;
                                gallery.invalidateCurrItems();
                                gallery.updateSize(true);
                            }
                        });
                        gallery.init();

    2、buttons不显示问题

      原因是:请求svg响应错误,要设置mime Type。对于vs2010,要使用iis express作为调试服务器,或者使用cdn的css。

      参看:http://www.cnblogs.com/zhaoyihao/p/7326116.html

    <link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.css'>
    <link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/default-skin/default-skin.css'>

     3、大图片loading样式更改

      在default-skin.css中加入css样式,让loading的gif放在正中间,loading过程中加上遮罩层。

    .pswp__preloader--active {
    
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color: black;
    }
    
    .pswp__preloader .pswp__preloader__icn {
    
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -7px;
    }

      页面中的loading div从top-bar中摘出来,放在pswp__ui上面,因为遮罩层要求狂傲都是100%。

    <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut">
                            </div>
                        </div>
                    </div>
                </div>

      ui-default.js中的函数改一下,这一部分代码是获取loading的div,因为我们更换了它的位置,导致获取不到了,要改为从pswp__scroll-wrap的child中获取该div。

    _toggleLoadingIndicator = function(hide) {
                        if (_loadingIndicatorHidden !== hide) {
                            _loadingIndicator = framework.getChildByClass(pswp.scrollWrap, 'pswp__preloader');
                            _togglePswpClass(_loadingIndicator, 'preloader--active', !hide);
                            _loadingIndicatorHidden = hide;
                        }
                    },

      小图片到大图片之间的延时默认是1秒,有一个切换效果,改为1ms。

    _defaultUIOptions = {
                        barsSize: { top: 44, bottom: 'auto' },
                        closeElClasses: ['item', 'caption', 'zoom-wrap', 'ui', 'top-bar'],
                        timeToIdle: 4000,
                        timeToIdleOutside: 1000,
                        loadingIndicatorDelay: 1, // 2s
    
                        addCaptionHTMLFn: function(item, captionEl /*, isFake */ ) {
                            if (!item.title) {
                                captionEl.children[0].innerHTML = '';
                                return false;
                            }
                            captionEl.children[0].innerHTML = item.title;
                            return true;
                        },
  • 相关阅读:
    Delphi中多标签页面的实现
    选择排序
    关于Delphi中TRttiContext.FindType失效的问题
    Delphi中拖动无边框窗口的5种方法
    集中精力做最有价值的事情,而不必把主要精力都浪费在自我包装上(例如学位,头衔,自吹自擂)——沉痛反思:我以前还真是这样
    QModelIndex有internalPointer()函数,可以存任何数据,另有QAbstractItemModel::createIndex来创造节点
    沉没成本——无法收回的成本,但不要影响下一次决策
    使用HttpURLConnection实现多线程下载
    Delphi6/7 中XML 文档的应用
    delphiXE调用Objective-c库
  • 原文地址:https://www.cnblogs.com/zhaoyihao/p/7323318.html
Copyright © 2011-2022 走看看