标签：
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。
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文件将被完全索引。 - 不要关键字东西它没有，只是不停的文本相关的，非垃圾邮件：即使你带显示隐藏的标题元素将被抓取。
标签：
原文地址：http://www.cnblogs.com/jiangxiaobo/p/5696016.html
