PhotoSwipe中文API(四)
在幻灯片自定义HTML内容
为了使PhotoSwipe显示HTML内容的幻灯片,你需要在幻灯片对象定义html属性。它应该包含HTML字符串或DOM元素对象。
var items = [
// slide 1 with HTML
{
html: '<div><h1>Any HTML <a href="http://example.com">content</a></h1></div>'
}, // slide 2 with image
{
src: 'path/to/image.jpg',
w:600,
h:200
}
]; // initialise as usual
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options); // You don't necessarily need to have "html" property in slide object initially.
// You may create it dynamically in gettingData event:
/*
gallery.listen('gettingData', function(index, item) {
if(index === 3) {
item.html = '<div>Dynamically generated HTML ' + Math.random() + '</div>';
} });
*/ // Note that init() method is called after gettingData event is bound
gallery.init();
其他重要事项:
为了避免与第三方模块,具有html属性幻灯片冲突,不应该有SRC(图像)属性。
PhotoSwipe是专为图像,而不是文本内容的滚轮。使用“自定义HTML”功能作为此外,例如,在相关的画廊,一个介绍的幻灯片,或图像之间的广告幻灯片。
我们强烈不建议添加视频或使用此方法的音频内容(包括YouTube,Vimeo的等内部框架)。随着HTML5视频块触摸了它的活动在很多移动浏览器(用户将无法刷卡的话)。如果你真的需要在PhotoSwipe视频,您可以将其添加为当用户点击当前的幻灯片显示模式,可以动态地在DOM创建模态和.pswp__scroll换行元素之后添加它。
如果启用了最初的放大/缩小的过渡,如果当前的幻灯片有HTML PhotoSwipe将自动禁用它,简单的淡入淡出的过渡将被用来代替。
默认情况下PhotoSwipe将使只是链接(<A>)及其子元素click事件。要改变这种行为,直视isClickable元素选项或防止拖动事件的事件。
不支持HTML滑块的放大,但。
html:
<button id="btn">Open PhotoSwipe</button> <!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> <!-- Background of PhotoSwipe.
It's a separate element, as animating opacity is faster than rgba(). -->
<div class="pswp__bg"></div> <!-- Slides wrapper with overflow:hidden. -->
<div class="pswp__scroll-wrap"> <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. -->
<div class="pswp__container">
<!-- don't modify these 3 pswp__item elements, data is added later on -->
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div> <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
<div class="pswp__ui pswp__ui--hidden"> <div class="pswp__top-bar"> <!-- Controls are self-explanatory. Order can be changed. --> <div class="pswp__counter"></div> <button class="pswp__button pswp__button--close" title="Close (Esc)"></button> <button class="pswp__button pswp__button--share" title="Share"></button> <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button> <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
<!-- element will get class pswp__preloader--active when preloader is running -->
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div> <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div> <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
</button> <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
</button> <div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div> </div> </div> </div>
css :
.hello-slide {
width: 100%;
max-width: 400px;
color: #FFF;
margin: 120px auto 0;
text-align: center; font-family: "Helvetica Neue", Arial, sans-serif; }
h1 {
font-weight: normal;
}
.hello-slide a {
color: #B5AEF7 !important;
}
js:
var openPhotoSwipe = function() {
var pswpElement = document.querySelectorAll('.pswp')[0]; // build items array
var items = [
{
html: '<div class="hello-slide"><h1>Hello world <a href="http://example.com">example.com</a></h1></div>'
},
{
src: 'https://farm7.staticflickr.com/6175/6176698785_7dee72237e_b.jpg',
w: 1024,
h: 683
}
]; // define options (if needed)
var options = {
// history & focus options are disabled on CodePen
history: false,
focus: false, showAnimationDuration: 0,
hideAnimationDuration: 0 }; var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
}; openPhotoSwipe(); document.getElementById('btn').onclick = openPhotoSwipe;
提示:您可以从CodePen下载示例在本地发挥它(编辑上CodePen - >分享 - >导出.zip文件)。
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(五)
Responsive Images PhotoSwipe不支持<图片>或srcset,因为它要求所定义的图像的尺寸,并使用延迟加载.但是,随着图像动态加载,它很容易切换人士透露,即便是在旧 ...
- Android JNI学习(四)——JNI的常用方法的中文API
本系列文章如下: Android JNI(一)——NDK与JNI基础 Android JNI学习(二)——实战JNI之“hello world” Android JNI学习(三)——Java与Nati ...
- 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 ...
随机推荐
- 对ChemDraw Prime 16.0你了解多少
ChemDraw Prime 16.0应用是化学智能绘图程序的行业领导者.除了创建符合出版标准的绘图,化学家们可以使用ChemDraw Prime软件预测性能,搜索数据库等来节省时间,提高数据的准确性 ...
- [java] Unsupported major.minor version 51.0 错误解决方案
jdk1.6工程中使用外部jar包中类出现:Unsupported major.minor version 51.0原因分析:出现上述错误是因为:外部jar包使用jdk1.7(jdk7)编译,而使用此 ...
- Java精选笔记_面向对象(包、访问控制、内存机制、垃圾回收机制)
包 包的定义与使用 专门用来存放类的,通常功能相同的类存放在相同的包中. 包的声明只能位于Java源文件的第一行 Java语言中的常用包 java.lang:包含Java语言的核心类,如String. ...
- centos 安装 phalcon
git clone --depth 1 --branch phalcon-v2.0.3 https://github.com/phalcon/cphalcon.git cd cphalcon/ext ...
- Spring中通过构造方法传参数
1.实体类 package com.xbq.bean;import java.util.Timer; /** * @ClassName: Student * @Description: TODO 学生 ...
- Zookeeper(三)-- JAVA原生API
一.前提 jar包:zookeeper-3.4.9.jar,slf4j-api-1.6.1.jar,slf4j-log4j12-1.6.1.jar,log4j-1.2.15.jar 二.Demo pa ...
- 你知道js当中for循环当中的bug吗,如何解决它
本来以为for循环可以很好的解决一切问题,直到今天遇到了这段代码,刷新了我对for循环的认识,话不多说,直接上代码 var arr = [];for(var i = 0;i<10;i++) { ...
- vs2008设置dll、lib库的输出路径
vs2008中,有些项目上的功能是要生产库文件给其他项目调用的,以下是一些设置库文件(x.dll和x.lib)输出路径的方法. 设置x.dll 输出路径方法是在右键项目的"属性"- ...
- PHP之ob_start()控制缓冲生成html
输出控制函数不对使用 header() 或 setcookie(), 发送的文件头信息产生影响,只对那些类似于 echo() 和 PHP 代码的数据块有作用. 我们先举一个简单的例子,让大家对Outp ...
- JS-提取字符串—>>普通方法VS正则表达式
如下:“23nr qreq2 34fq4 4454gsr 45” [将这一串字符中的数字挑出来,当然人家作伴的不能被分开]. 一.普通方法: <script type="text/ja ...