PhotoSwipe中文API(五)

Responsive Images

PhotoSwipe不支持<圖片>或srcset，因為它要求所定義的圖像的尺寸，並使用延遲加載。但是，隨着圖像動態加載，它很容易切換人士透露，即便是在舊的瀏覽器不支持srcset。
讓我們假設你只有“中等”的圖片和“原始”（“大”）的圖像。首先，你需要存儲在幻燈片對象的圖像的路徑和大小，例如像這樣：

var items = [

    // Slide 1
    {
        mediumImage: {
            src: 'path/to/medium-image-1.jpg',
            w:800,
            h:600
        },
        originalImage: {
            src: 'path/to/large-image-1.jpg',
            w: 1400,
            h: 1050
        }
    },

    // Slide 2
    // {
    //     mediumImage: {
    //         src: 'path/to/medium-image-2.jpg',
    //         ...
    //     
    // ...

];

Then:

// initialise as usual
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);

// create variable that will store real size of viewport
var realViewportWidth,
    useLargeImages = false,
    firstResize = true,
    imageSrcWillChange;

// beforeResize event fires each time size of gallery viewport updates
gallery.listen('beforeResize', function() {
    // gallery.viewportSize.x - width of PhotoSwipe viewport
    // gallery.viewportSize.y - height of PhotoSwipe viewport
    // window.devicePixelRatio - ratio between physical pixels and device independent pixels (Number)
    //                          1 (regular display), 2 (@2x, retina) ...


    // calculate real pixels when size changes
    realViewportWidth = gallery.viewportSize.x * window.devicePixelRatio;

    // Code below is needed if you want image to switch dynamically on window.resize

    // Find out if current images need to be changed
    if(useLargeImages && realViewportWidth < 1000) {
        useLargeImages = false;
        imageSrcWillChange = true;
    } else if(!useLargeImages && realViewportWidth >= 1000) {
        useLargeImages = true;
        imageSrcWillChange = true;
    }

    // Invalidate items only when source is changed and when it's not the first update
    if(imageSrcWillChange && !firstResize) {
        // invalidateCurrItems sets a flag on slides that are in DOM,
        // which will force update of content (image) on window.resize.
        gallery.invalidateCurrItems();
    }

    if(firstResize) {
        firstResize = false;
    }

    imageSrcWillChange = false;

});


// gettingData event fires each time PhotoSwipe retrieves image source & size
gallery.listen('gettingData', function(index, item) {

    // Set image source & size based on real viewport width
    if( useLargeImages ) {
        item.src = item.originalImage.src;
        item.w = item.originalImage.w;
        item.h = item.originalImage.h;
    } else {
        item.src = item.mediumImage.src;
        item.w = item.mediumImage.w;
        item.h = item.mediumImage.h;
    }

    // It doesn't really matter what will you do here, 
    // as long as item.src, item.w and item.h have valid values.
    // 
    // Just avoid http requests in this listener, as it fires quite often

});


// Note that init() method is called after gettingData event is bound
gallery.init();

你不一定要使用幻燈片對象，看起來酷似以上（含mediumImage和largeImage對象）的結構。例如，您可以直接在圖像文件名（/path/to/large-image-600x500.jpg）存儲圖像的大小，然后在gettingData事件解析大小。只有item.src，item.w和item.h屬性由PhotoSwipe讀取和gettingData事件被觸發之后。

較大的圖像，不太流暢的動畫外觀。

盡量避免服務只是基於設備像素比或只是基於視口大小的圖像，始終兩者結合起來。

隨意的打開PhotoSwipe縮略圖使用srcset。

Image Gallery SEO

PhotoSwipe不強制HTML標記，你有完全控制權。簡單的標記是鏈接到大的圖像，最簡單的例子縮略圖列表：

<a href="large-image.jpg">
    <img src="small-image.jpg" alt="Image description" />
</a>
...

如果你有很長的標題，不適合在ALT或只是包含HTML標記，您可以使用<人物>和<figcaption>：

<figure>
    <a href="large-image.jpg">
        <img src="small-image.jpg" alt="Image description" />
    </a>
    <figcaption>Long image description</figcaption>
</figure>
...

你可以更進一步，使用Schema.org標記為ImageGallery和ImageObject，它應該是這樣的：

<div itemscope itemtype="http://schema.org/ImageGallery">

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

        <!-- optionally use this method to store image dimensions for PhotoSwipe -->
        <meta itemprop="width" content="300">
        <meta itemprop="height" content="600">

        <figcaption itemprop="caption description">
            Long image description

            <!-- optionally define copyright -->
            <span itemprop="copyrightHolder">Photo: AP</span>
        </figcaption>
    </figure>

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

    ...

</div>

如果你不想縮略圖是網頁，例如可見你在畫廊50幅圖像，你只顯示前3的縮略圖+鏈接“查看所有圖片（50）”，你一定要在鏈接元素的內容使用Schema.org標記，你應該有所有50個鏈接（文字，而不是縮略圖）的DOM（你可能會顯示隱藏：無）。 例：

<div itemscope itemtype="http://schema.org/ImageGallery">

    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
        <a href="large-image-1.jpg" itemprop="contentUrl">
            <figcaption itemprop="caption description">Long image description 1</figcaption>
        </a>
    </figure>

    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
        <a href="large-image-2.jpg" itemprop="contentUrl">
            <figcaption itemprop="caption description">Long image description 2</figcaption>
        </a>
    </figure>

    ...

</div>

在上述所有情況下，大image.jpg文件將被完全索引。 - 不要關鍵字東西它沒有，只是不停的文本相關的，非垃圾郵件：即使你帶顯示隱藏的標題元素將被抓取。