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文件将被完全索引。 - 不要关键字东西它没有,只是不停的文本相关的,非垃圾邮件:即使你带显示隐藏的标题元素将被抓取。

PhotoSwipe中文API(五)的更多相关文章

  1. PhotoSwipe中文API(三)

    http://photoswipe.com/documentation/api.html 所有的方法和这个网页上列出的属性是公开的.如果你想看看例子什么API可以做的,拿在默认PhotoSwipe U ...

  2. PhotoSwipe中文API(一)

    入门 您应知道之前先做起事情: 1. PhotoSwipe不是一个简单的jQuery插件,至少基本的JavaScript知识才能安装. 2. PhotoSwipe需要预定义的图像尺寸(更多关于这一点) ...

  3. PhotoSwipe中文API(二)

    配置 选项是在键 - 值对添加作为参数传递给PhotoSwipe构造,例如通过: var options = { index: 3, escKey: false, // ui option timeT ...

  4. PhotoSwipe中文API(四)

    在幻灯片自定义HTML内容 为了使PhotoSwipe显示HTML内容的幻灯片,你需要在幻灯片对象定义html属性.它应该包含HTML字符串或DOM元素对象. var items = [ // sli ...

  5. Android 中文 API (40) —— RatingBar

    Android 中文 API (40) —— RatingBar 前言 本章内容是 android.widget.RatingBar,译为"评分条",版本为Android 2.2 ...

  6. (转)jQuery验证控件jquery.validate.js使用说明+中文API

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

  7. Android 中文API (70) —— BluetoothDevice[蓝牙]

    前言 本章内容是  android.bluetooth.BluetoothDevice,为Android蓝牙部分的章节翻译.蓝牙设备类,代表了蓝牙通讯国足中的远端设备.版本为 Android  2.3 ...

  8. Android 中文API (69) —— BluetoothAdapter[蓝牙]

    前言 本章内容是  android.bluetooth.BluetoothAdapter,为Android蓝牙部分的章节翻译.本地蓝牙设备的适配类,所有的蓝牙操作都要通过该类完成.版本为 Androi ...

  9. Android JNI学习(四)——JNI的常用方法的中文API

    本系列文章如下: Android JNI(一)——NDK与JNI基础 Android JNI学习(二)——实战JNI之“hello world” Android JNI学习(三)——Java与Nati ...

随机推荐

  1. 13年10月 月赛第一场 set 4 迷宫问题

    题目 给定一个n*m的迷宫,如S....#E.E其中,S代表开始位置,#代表不可行走的墙,E代表出口.主人公从开始位置出发,每次等概率的随机选择下一个可以行走的位置(可能会发生回溯),直到到达某一个出 ...

  2. ios 获取手机相关的信息

    获取手机信息      应用程序的名称和版本号等信息都保存在mainBundle的一个字典中,用下面代码可以取出来 //获取版本号 NSDictionary *infoDict = [[NSBundl ...

  3. 苹果降频门:旧款iPhone哪些功能受到影响

    要说苹果最近发生的大事,就数网络上传的沸沸扬扬的降频门事件了,近期苹果在新发布的iOS 11系统中新增了一项功能,意在降低旧款手机的电量消耗,但限制了旧款iPhone的性能,那么iPhone有哪些功能 ...

  4. lodash(一)数组

    前言: lodash是一个具有一致接口.模块化.高性能等特性的JavaScript工具库(官网地址:http://lodashjs.com/docs/#_differencearray-values) ...

  5. unix:/tmp/php-cgi.sock

    为什么要用unix:/tmp/php-cgi.sock,最主要的特征就是unix socket比tcp快,当网站流量大的时候,服务器的优化是分毫必争的. 当我们用php-fpm来管理我们的php启动时 ...

  6. cstring、string、wstring、int、char*、tchar、 int、dword等相互转换代码输出测试

    #include <string> #include <tchar.h> // _TCHAR #include <stdlib.h> #include <io ...

  7. Oracle类型number与PG类型numeric对比和转换策略

    Oracle 11g number 任意精度数字类型 http://docs.oracle.com/cd/B28359_01/server.111/b28318/datatype.htm#CNCPT3 ...

  8. 深入浅出Docker(六):像谷歌一样部署你的应用

    1.概述 谷歌发起的开源项目从来都是广受技术圈的关注和讨论,本文将介绍的就是最新的容器编排管理系统Kubernetes.Kubernetes开源项目版本更新频繁,对于初次使用者来说其定义大量的技术术语 ...

  9. The 70th problem,UVa10396 Vampire Numbers

    今天看Thinking in Java看到一个吸血鬼数的问题,于是查找UVa里也有类似的问题就动手写了先是用Java写的,不过WA了两次,然后没有发现错误,又用c++写的还是不行.最后发现要排序去重. ...

  10. 使用servlet3.0提供的API来进行文件的上传操作

    servlet 3.0针对文件上传做了一些优化,提供了一些更加人性化的API可以直接在request中的到文件的名称.文件size,MIME类型,以及用InputStream表示的文件流的信息 @Re ...