PhotoSwipe中文API(五)

Responsive Images

PhotoSwipe不支持<图片>或srcset，因为它要求所定义的图像的尺寸，并使用延迟加载。但是，随着图像动态加载，它很容易切换人士透露，即便是在旧的浏览器不支持srcset。
让我们假设你只有“中等”的图片和“原始”（“大”）的图像。首先，你需要存储在幻灯片对象的图像的路径和大小，例如像这样：

 1 var items = [
 2 
 3     // Slide 1
 4     {
 5         mediumImage: {
 6             src: 'path/to/medium-image-1.jpg',
 7             w:800,
 8             h:600
 9         },
10         originalImage: {
11             src: 'path/to/large-image-1.jpg',
12             w: 1400,
13             h: 1050
14         }
15     },
16 
17     // Slide 2
18     // {
19     //     mediumImage: {
20     //         src: 'path/to/medium-image-2.jpg',
21     //         ...
22     //     
23     // ...
24 
25 ];

Then:

 1 // initialise as usual
 2 var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
 3 
 4 // create variable that will store real size of viewport
 5 var realViewportWidth,
 6     useLargeImages = false,
 7     firstResize = true,
 8     imageSrcWillChange;
 9 
10 // beforeResize event fires each time size of gallery viewport updates
11 gallery.listen('beforeResize', function() {
12     // gallery.viewportSize.x - width of PhotoSwipe viewport
13     // gallery.viewportSize.y - height of PhotoSwipe viewport
14     // window.devicePixelRatio - ratio between physical pixels and device independent pixels (Number)
15     //                          1 (regular display), 2 (@2x, retina) ...
16 
17 
18     // calculate real pixels when size changes
19     realViewportWidth = gallery.viewportSize.x * window.devicePixelRatio;
20 
21     // Code below is needed if you want image to switch dynamically on window.resize
22 
23     // Find out if current images need to be changed
24     if(useLargeImages && realViewportWidth < 1000) {
25         useLargeImages = false;
26         imageSrcWillChange = true;
27     } else if(!useLargeImages && realViewportWidth >= 1000) {
28         useLargeImages = true;
29         imageSrcWillChange = true;
30     }
31 
32     // Invalidate items only when source is changed and when it's not the first update
33     if(imageSrcWillChange && !firstResize) {
34         // invalidateCurrItems sets a flag on slides that are in DOM,
35         // which will force update of content (image) on window.resize.
36         gallery.invalidateCurrItems();
37     }
38 
39     if(firstResize) {
40         firstResize = false;
41     }
42 
43     imageSrcWillChange = false;
44 
45 });
46 
47 
48 // gettingData event fires each time PhotoSwipe retrieves image source & size
49 gallery.listen('gettingData', function(index, item) {
50 
51     // Set image source & size based on real viewport width
52     if( useLargeImages ) {
53         item.src = item.originalImage.src;
54         item.w = item.originalImage.w;
55         item.h = item.originalImage.h;
56     } else {
57         item.src = item.mediumImage.src;
58         item.w = item.mediumImage.w;
59         item.h = item.mediumImage.h;
60     }
61 
62     // It doesn't really matter what will you do here, 
63     // as long as item.src, item.w and item.h have valid values.
64     // 
65     // Just avoid http requests in this listener, as it fires quite often
66 
67 });
68 
69 
70 // Note that init() method is called after gettingData event is bound
71 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标记，你有完全控制权。简单的标记是链接到大的图像，最简单的例子缩略图列表：

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

如果你有很长的标题，不适合在ALT或只是包含HTML标记，您可以使用<人物>和<figcaption>：

1 <figure>
2     <a href="large-image.jpg">
3         <img src="small-image.jpg" alt="Image description" />
4     </a>
5     <figcaption>Long image description</figcaption>
6 </figure>
7 ...

你可以更进一步，使用Schema.org标记为ImageGallery和ImageObject，它应该是这样的：

 1 <div itemscope itemtype="http://schema.org/ImageGallery">
 2 
 3     <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 4         <a href="large-image.jpg" itemprop="contentUrl">
 5             <img src="small-image.jpg" itemprop="thumbnail" alt="Image description" />
 6         </a>
 7 
 8         <!-- optionally use this method to store image dimensions for PhotoSwipe -->
 9         <meta itemprop="width" content="300">
10         <meta itemprop="height" content="600">
11 
12         <figcaption itemprop="caption description">
13             Long image description
14 
15             <!-- optionally define copyright -->
16             <span itemprop="copyrightHolder">Photo: AP</span>
17         </figcaption>
18     </figure>
19 
20     <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
21         <a href="large-image.jpg" itemprop="contentUrl">
22             <img src="small-image.jpg" itemprop="thumbnail" alt="Image description" />
23         </a>
24         <figcaption itemprop="caption description">Long image description</figcaption>
25     </figure>
26 
27     ...
28 
29 </div>

如果你不想缩略图是网页，例如可见你在画廊50幅图像，你只显示前3的缩略图+链接“查看所有图片（50）”，你一定要在链接元素的内容使用Schema.org标记，你应该有所有50个链接（文字，而不是缩略图）的DOM（你可能会显示隐藏：无）。 例：

 1 <div itemscope itemtype="http://schema.org/ImageGallery">
 2 
 3     <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 4         <a href="large-image-1.jpg" itemprop="contentUrl">
 5             <figcaption itemprop="caption description">Long image description 1</figcaption>
 6         </a>
 7     </figure>
 8 
 9     <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
10         <a href="large-image-2.jpg" itemprop="contentUrl">
11             <figcaption itemprop="caption description">Long image description 2</figcaption>
12         </a>
13     </figure>
14 
15     ...
16 
17 </div>

在上述所有情况下，大image.jpg文件将被完全索引。 - 不要关键字东西它没有，只是不停的文本相关的，非垃圾邮件：即使你带显示隐藏的标题元素将被抓取。