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文件将被完全索引。 - 不要关键字东西它没有,只是不停的文本相关的,非垃圾邮件:即使你带显示隐藏的标题元素将被抓取。
PhotoSwipe中文API(五)的更多相关文章
- PhotoSwipe中文API(三)
http://photoswipe.com/documentation/api.html 所有的方法和这个网页上列出的属性是公开的.如果你想看看例子什么API可以做的,拿在默认PhotoSwipe U ...
- PhotoSwipe中文API(一)
入门 您应知道之前先做起事情: 1. PhotoSwipe不是一个简单的jQuery插件,至少基本的JavaScript知识才能安装. 2. PhotoSwipe需要预定义的图像尺寸(更多关于这一点) ...
- PhotoSwipe中文API(二)
配置 选项是在键 - 值对添加作为参数传递给PhotoSwipe构造,例如通过: var options = { index: 3, escKey: false, // ui option timeT ...
- PhotoSwipe中文API(四)
在幻灯片自定义HTML内容 为了使PhotoSwipe显示HTML内容的幻灯片,你需要在幻灯片对象定义html属性.它应该包含HTML字符串或DOM元素对象. var items = [ // sli ...
- Android 中文 API (40) —— RatingBar
Android 中文 API (40) —— RatingBar 前言 本章内容是 android.widget.RatingBar,译为"评分条",版本为Android 2.2 ...
- (转)jQuery验证控件jquery.validate.js使用说明+中文API
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...
- Android 中文API (70) —— BluetoothDevice[蓝牙]
前言 本章内容是 android.bluetooth.BluetoothDevice,为Android蓝牙部分的章节翻译.蓝牙设备类,代表了蓝牙通讯国足中的远端设备.版本为 Android 2.3 ...
- Android 中文API (69) —— BluetoothAdapter[蓝牙]
前言 本章内容是 android.bluetooth.BluetoothAdapter,为Android蓝牙部分的章节翻译.本地蓝牙设备的适配类,所有的蓝牙操作都要通过该类完成.版本为 Androi ...
- Android JNI学习(四)——JNI的常用方法的中文API
本系列文章如下: Android JNI(一)——NDK与JNI基础 Android JNI学习(二)——实战JNI之“hello world” Android JNI学习(三)——Java与Nati ...
随机推荐
- WinSock1.1和WinSock2.0
网络编程很重要,说到网络编程就不得不提Socket编程. Windows提供了Windows Socket API(简称WSA),WinSock,目前有两个版本:WinSock1.1 and WinS ...
- IIS 使用多个https和通配证书解决方案
环境:OS :WINDOWS 2008 IIS: IIS7 域名:三个二级域名 问题:由于一个网站只支持一个443,但可以通过更改配置得到绑定不同域名.但由于公用证书,所以问题出来.只能为一个二级域名 ...
- JavaScript------字符串与HTML格式相互转换
转载: http://blog.sina.com.cn/s/blog_4cb0b0fc0100aoo1.html 代码:: 1.将字符转换成Html function encodeHtml(str){ ...
- Dubbo注册中心Zookeeper安装步骤
第一步:安装jdk 第二步:上传zookeeper至Linux 第三步:解压zookeeper安装包(/soft目录是我在根目录下建立的一个用户存放上传安装包的目录),解压命令tar -xvf /so ...
- Android 使用ListView显示信息列表
课程目标1.理解ListView的基础使用2.学会熟练运用两种适配器(ArrayAdapter.SimpleAdapter)3.学会熟练运用两种监听器(OnScrollListener.OnItemC ...
- PyQt4进度条QProgressBar
当我们在处理一个好事较长的任务时,可能就会用到进度条部件.因为使用进度条可以形象告诉用户当前的人物正在进行中.PyQt4工具包提供了水平和垂直两种类型的进度条部件.我们可以设置进度条的最大和最小值,默 ...
- 使用jQuery操作元素属性
在jQuery中,提供了attr函数来操作元素属性,具体如下: 函数名 说明 例子 attr(name) 取得第一个匹配元素的属性值. $("input").attr(" ...
- K-mean和k-mean++
(1)k-mean聚类 k-mean聚类比较容易理解就是一个计算距离,找中心点,计算距离,找中心点反复迭代的过程, 给定样本集D={x1,x2,...,xm},k均值算法针对聚类所得簇划分C={C1, ...
- MUI 分享功能(微信、QQ 、朋友圈)
配置文件:manifest.json plus ->plugins 下边 "share": {/*配置应用使用分享功能,参考http://ask.dcloud.net.cn/ ...
- 【WebService】Stax的基本操作基于游标
<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <book ...