建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

PhotoSwipe 效果超棒的可触屏的JS灯箱画廊插件

来源:易助科技网浏览量:50收藏

简介


PhotoSwipe是为移动设备和触摸设备设计的Vanilla JavaScript图像库。它为您的访问者提供了一个熟悉而直观的界面,允许他们与您的移动网站上的图像进行交互。


更多灯箱画廊插件:👉  [ 详情 ]


PhotoSwipe 效果超棒的可触屏的JS灯箱画廊插件-不同设备上的效果演示图


在开始之前,需了解:


PhotoSwipe需要预定义的图像尺寸,您必须定义每个图像的宽度和高度。

PhotoSwipe不是为显示非常大的图像而设计的。提供响应灵敏的图像。建议的最大大小为3000x3000px。然而,有一个实验性的平铺插件可以显示超大的图像。

PhotoSwipe在设计时考虑到了渐进增强功能,仅适用于现代浏览器。始终提供另一种查看内容的方式(例如,链接到图像)。


💡 说明


本文是针对v4版本的,该插件现已升级到 v5,如需了解请去官网查阅  👉 [ 官网地址 ] 。



使用


1. 引入


<!-- Core CSS file -->
<link rel="stylesheet" href="path/to/photoswipe.css"> 

<!-- Skin CSS file (styling of UI - buttons, caption, etc.)
     In the folder of skin CSS file there are also:
     - .png and .svg icons sprite, 
     - preloader.gif (for browsers that do not support CSS animations) -->
<link rel="stylesheet" href="path/to/default-skin/default-skin.css"> 

<!-- Core JS file -->
<script src="path/to/photoswipe.min.js"></script> 

<!-- UI JS file -->
<script src="path/to/photoswipe-ui-default.min.js"></script> 


如何以及在何处包含JS和CSS文件并不重要。只有当您调用新的 PhotoSwipe() 时,代码才会执行。因此,如果您最初不需要打开PhotoSwipe,请随时推迟加载文件。

PhotoSwipe还支持AMD加载程序(如RequireJS)和CommonJS,使用它们如下:


require([ 
        'path/to/photoswipe.js', 
        'path/to/photoswipe-ui-default.js' 
    ], function( PhotoSwipe, PhotoSwipeUI_Default ) {

    //      var gallery = new PhotoSwipe( someElement, PhotoSwipeUI_Default ...
    //      gallery.init() 
    //      ...

});


此外,您也可以通过 Bower(Bower-install-photoswipe)或 NPM(NPM-install-photsswipe)安装它。



2. HTML


您可以通过JS动态添加HTML代码(直接在初始化之前),也可以将其初始添加到页面中(就像在演示页面上所做的那样)。此代码可以附加在任何位置,但最好是在结束</body>之前。您可以在多个库中重用它(只要您使用相同的UI类)。


<!-- 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>

                <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- 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>


不应更改pswp__bg、pswp__scroll-wrap、pswp__container和pswp__item元素的顺序。



3. 调用


执行PhotoSwipe构造函数。它接受4个参数:


1)HTML 中的 .pswp 元素(它必须已添加到DOM中)。

2)PhotoSwipe UI类。如果包含默认的 photoswipe-ui-default.js,类将是 PhotoSwipeUI_Default 。可能是 f alse

3)带有对象的数组(slides)。

4)配置项。


var pswpElement = document.querySelectorAll('.pswp')[0];

// build items array
var items = [
    {
        src: 'https://placekitten.com/600/400',
        w: 600,
        h: 400
    },
    {
        src: 'https://placekitten.com/1200/900',
        w: 1200,
        h: 900
    }
];

// define options (if needed)
var options = {
    // optionName: 'option value'
    // for example:
    index: 0 // start at first slide
};

// Initializes and opens PhotoSwipe
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();


创建幻灯片对象数组


数组中的每个对象都应该包含关于幻灯片的数据,它可以是您希望在PhotoSwipe中显示的任何内容——图像的路径、标题字符串、共享数量、评论等。默认情况下,PhotoSwipe仅使用5个属性:src (path to image), w (image width), h (image height), msrc (path to small image placeholder, large image will be loaded on top), html (custom HTML, more about it)。

在导航过程中,PhotoSwipe会将自己的属性添加到此对象(如 minZoom 或者 loaded)。


var slides = [

    // slide 1
    {

        src: 'path/to/image1.jpg', // path to image
        w: 1024, // image width
        h: 768, // image height

        msrc: 'path/to/small-image.jpg', // small image placeholder,
                        // main (large) image loads on top of it,
                        // if you skip this parameter - grey rectangle will be displayed,
                        // try to define this property only when small image was loaded before



        title: 'Image Caption'  // used by Default PhotoSwipe UI
                                // if you skip it, there won't be any caption


        // You may add more properties here and use them.
        // For example, demo gallery uses "author" property, which is used in the caption.
        // author: 'John Doe'

    },

    // slide 2
    {
        src: 'path/to/image2.jpg', 
        w: 600, 
        h: 600

        // etc.
    }

    // etc.

];


您可以在PhotoSwipe读取幻灯片对象属性之前直接动态定义它们,使用gettingData事件(更多信息请参阅文档的 API 部分)。例如,这种技术可以用于 为不同的屏幕尺寸 提供不同的图像。


如何从链接列表构建幻灯片数组,假设您有一个链接/缩略图列表,如下所示(有关图库标记的更多信息):


<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">

    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
        <a href="large-image.jpg" itemprop="contentUrl" data-size="600x400">
            <img src="small-image.jpg" itemprop="thumbnail" alt="Image description" />
        </a>
        <figcaption itemprop="caption description">Image caption</figcaption>
    </figure>

    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
        <a href="large-image.jpg" itemprop="contentUrl" data-size="600x400">
            <img src="small-image.jpg" itemprop="thumbnail" alt="Image description" />
        </a>
        <figcaption itemprop="caption description">Image caption</figcaption>
    </figure>


</div>



4. 默认UI选项


PhotoSwipeUI_Default(dist/ui/photoswipe-ui-Default.js)的选项以与核心选项相同的方式添加到相同的对象中。


// Size of top & bottom bars in pixels,
// "bottom" parameter can be 'auto' (will calculate height of caption)
// option applies only when mouse is used, 
// or width of screen is more than 1200px
// 
// (Also refer to `parseVerticalMargin` event)
barsSize: {top:44, bottom:'auto'}, 

// Adds class pswp__ui--idle to pswp__ui element when mouse isn't moving for 4000ms
timeToIdle: 4000,

// Same as above, but this timer applies when mouse leaves the window
timeToIdleOutside: 1000,

// Delay until loading indicator is displayed
loadingIndicatorDelay: 1000,

// Function builds caption markup
addCaptionHTMLFn: function(item, captionEl, isFake) {
    // item      - slide object
    // captionEl - caption DOM element
    // isFake    - true when content is added to fake caption container
    //             (used to get size of next or previous caption)

    if(!item.title) {
        captionEl.children[0].innerHTML = '';
        return false;
    }
    captionEl.children[0].innerHTML = item.title;
    return true;
},

// Buttons/elements
closeEl:true,
captionEl: true,
fullscreenEl: true,
zoomEl: true,
shareEl: true,
counterEl: true,
arrowEl: true,
preloaderEl: true,

// Tap on sliding area should close gallery
tapToClose: false,

// Tap should toggle visibility of controls
tapToToggleControls: true,

// Mouse click on image should close the gallery,
// only when image is smaller than size of the viewport
clickToCloseNonZoomable: true,

// Element classes click on which should close the PhotoSwipe.
// In HTML markup, class should always start with "pswp__", e.g.: "pswp__item", "pswp__caption".
// 
// "pswp__ui--over-close" class will be added to root element of UI when mouse is over one of these elements
// By default it's used to highlight the close button.
closeElClasses: ['item', 'caption', 'zoom-wrap', 'ui', 'top-bar'], 

// Separator for "1 of X" counter
indexIndicatorSep: ' / ',



// Share buttons
// 
// Available variables for URL:
// {{url}}             - url to current page
// {{text}}            - title
// {{image_url}}       - encoded image url
// {{raw_image_url}}   - raw image url
shareButtons: [
    {id:'facebook', label:'Share on Facebook', url:'https://www.facebook.com/sharer/sharer.php?u={{url}}'},
    {id:'twitter', label:'Tweet', url:'https://twitter.com/intent/tweet?text={{text}}&url={{url}}'},
    {id:'pinterest', label:'Pin it', url:'http://www.pinterest.com/pin/create/button/?url={{url}}&media={{image_url}}&description={{text}}'},
    {id:'download', label:'Download image', url:'{{raw_image_url}}', download:true}
],


// Next 3 functions return data for share links
// 
// functions are triggered after click on button that opens share modal,
// which means that data should be about current (active) slide
getImageURLForShare: function( shareButtonData ) {
    // `shareButtonData` - object from shareButtons array
    // 
    // `pswp` is the gallery instance object,
    // you should define it by yourself
    // 
    return pswp.currItem.src || '';
},
getPageURLForShare: function( shareButtonData ) {
    return window.location.href;
},
getTextForShare: function( shareButtonData ) {
    return pswp.currItem.title || '';
},

// Parse output of share links
parseShareButtonOut: function(shareButtonData, shareButtonOut) {
    // `shareButtonData` - object from shareButtons array
    // `shareButtonOut` - raw string of share link element
    return shareButtonOut;
}



相关链接


官方文档 :  https://photoswipe.com/v4-docs/getting-started.html

GitHub 地址 :  https://github.com/dimsemenov/PhotoSwipe/tree/v4.1.3

易助科技网效果演示地址:  http://demo.easyzone.net.cn/plugin/PhotoSwipe/index.html#&gid=1&pid=1