jquery图片播放浏览插件prettyPhoto使用详解


Posted in Javascript onDecember 19, 2014

一、prettyPhoto简介

jquery图片播放浏览插件prettyPhoto使用详解

prettyPhoto是一款基于jquery的轻量级的lightbox图片播放浏览插件,它不仅支持图片,还同时支持视频、flash、YouTube、iframe和ajax。而且prettyPhoto配置和使用都十分简单,扩展性也不错,你可以最大限度地自定义prettyPhoto。目前,prettyPhoto兼容大部分主流的浏览器,包括令人纠结的IE6。

prettyPhoto插件的项目地址:http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

建议英文好的朋友直接去官网上了解这个插件的用法,如果你的英文很烂,那么也别急,下面我就给大家来一一介绍prettyPhoto的使用方法。

二、prettyPhoto使用方法介绍

1、引入jquery核心库和prettyPhoto插件库以及prettyPhoto样式表文件

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>

<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />

<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

2、初始化jquery插件,以下是最简单的配置的js代码

$(document).ready(function(){

    $("a[rel^='prettyPhoto']").prettyPhoto();

});

下面是每种类型的html代码

1、单张图片

<a href="images/fullscreen/2.jpg" rel="prettyPhoto" title="This is the description">

<img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="This is the title" />

</a>

2、图片相册

<a href="images/fullscreen/1.jpg" rel="prettyPhoto[pp_gal]" title="You can add caption to pictures.">

<img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="Red round shape" />

</a>

<a href="images/fullscreen/2.jpg" rel="prettyPhoto[pp_gal]">

<img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="Nice building" />

</a>

<a href="images/fullscreen/3.jpg" rel="prettyPhoto[pp_gal]">

<img src="images/thumbnails/t_3.jpg" width="60" height="60" alt="Fire!" />

</a>

<a href="images/fullscreen/4.jpg" rel="prettyPhoto[pp_gal]">

<img src="images/thumbnails/t_4.jpg" width="60" height="60" alt="Rock climbing" />

</a>

<a href="images/fullscreen/5.jpg" rel="prettyPhoto[pp_gal]">

<img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="Fly kite, fly!" />

</a>

3、单个flash

<a href="http://www.adobe.com/products/flashplayer/include/marquee/design.swf?width=792&height=294" 

rel="prettyPhoto[flash]" title="Flash 10 demo">

<img src="images/thumbnails/flash-logo.jpg" alt="Flash 10 demo" width="60" />

</a>

4、YouTube视频

<a href="http://www.youtube.com/watch?v=qqXi8WmQ_WM" rel="prettyPhoto" title="">

<img src="images/thumbnails/flash-logo.jpg" alt="YouTube" width="60" />

</a>

5、Vimeo

<a href="http://vimeo.com/8245346" rel="prettyPhoto" title=""> <img src="images/thumbnails/flash-logo.jpg" alt="YouTube" width="60" /> </a>

6、QuickTime影片

<a title="Despicable Me" rel="prettyPhoto[movies]" href="http://trailers.apple.com/movies/universal/despicableme/despicableme-tlr1_r640s.mov?width=640&height=360"> <img src="/wp-content/themes/NMFE/images/thumbnails/quicktime-logo.png" alt="Despicable Me" width="50" /> </a> <a title="Tales from Earthsea" rel="prettyPhoto[movies]" href="http://trailers.apple.com/movies/disney/talesfromearthsea/talesfromearthsea-tlr1_r640s.mov?width=640&height=340"> <img src="/wp-content/themes/NMFE/images/thumbnails/quicktime-logo.png" alt="Tales from Earthsea" width="50" /> </a> <a title="Grease Sing-A-Long" rel="prettyPhoto[movies]" href="http://trailers.apple.com/movies/paramount/greasesingalong/greasesingalong-tlr1_r640s.mov?width=640&height=272"> <img src="/wp-content/themes/NMFE/images/thumbnails/quicktime-logo.png" alt="Grease Sing-A-Long" width="50" /> </a>

7、外部网站(iframe

<a href="http://www.google.com?iframe=true&width=100%&height=100%" 

rel="prettyPhoto[iframes]" title="Google.com opened at 100%">Google.com</a>

<a href="http://www.apple.com?iframe=true&width=500&height=250" rel="prettyPhoto[iframes]">Apple.com</a>

<a href="http://www.twitter.com?iframe=true&width=400&height=200" rel="prettyPhoto[iframes]">Twitter.com</a>

8、普通文本

<a href="#inline-1" rel="prettyPhoto" ><img src="/wp-content/themes/NMFE/images/thumbnails/earth-logo.jpg" alt="" width="50" /></a>

<div id="inline-1" class="hide">

    <p>这里是普通的文本</p>

    <p>今天给大家介绍的prettyPhoto希望大家能喜欢,这个是播放普通文本的html</p>

</div>

9、AJAX内容

<a rel="prettyPhoto[ajax]" href="/demos/prettyPhoto-jquery-lightbox-clone/xhr_response.html?

ajax=true&width=325&height=185">Ajax content</a>

三、总结

prettyBox图片播放插件很好用,赶紧用它来打造你的专属相册吧!

Javascript 相关文章推荐
用javascript获取textarea中的光标位置
May 06 Javascript
document.getElementById方法在Firefox与IE中的区别
May 18 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 Javascript
JS加载iFrame出现空白问题的解决办法
May 13 Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
Nov 23 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
Vue+axios 实现http拦截及路由拦截实例
Apr 25 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 Javascript
详解Angular 4 表单快速入门
Jun 05 Javascript
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
js中匿名函数的创建与调用方法分析
Dec 19 #Javascript
浅谈Javascript中匀速运动的停止条件
Dec 19 #Javascript
浅谈Javascript如何实现匀速运动
Dec 19 #Javascript
Javascript添加监听与删除监听用法详解
Dec 19 #Javascript
Javascript 实现图片无缝滚动
Dec 19 #Javascript
使用JavaScript获取地址栏参数的方法
Dec 19 #Javascript
JS获取各种宽度、高度的简单介绍
Dec 19 #Javascript
You might like
php in_array 函数使用说明与in_array需要注意的地方说明
2010/04/13 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
Stop SQL Server
2007/06/21 Javascript
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
JS 事件绑定函数代码
2010/04/28 Javascript
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
javascript将url中的参数加密解密代码
2014/11/17 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
2016/06/01 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
微信小程序文章列表功能完整实例
2020/06/03 Javascript
[50:11]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第三场
2018/04/09 DOTA
Python通过DOM和SAX方式解析XML的应用实例分享
2015/11/16 Python
python从入门到精通(DAY 3)
2015/12/20 Python
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
Python构建XML树结构的方法示例
2017/06/30 Python
浅谈Python由__dict__和dir()引发的一些思考
2017/10/30 Python
python获取txt文件词向量过程详解
2019/07/05 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
Python学习笔记之列表推导式实例分析
2019/08/13 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
Django设置Postgresql的操作
2020/05/14 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
GUESS盖尔斯法国官网:美国时尚品牌
2016/09/23 全球购物
ASICS印度官方网站:日本专业运动品牌
2020/06/20 全球购物
大学秋游活动方案
2014/02/11 职场文书
校园安全广播稿范文
2014/09/25 职场文书
2014年检察院个人工作总结
2014/12/09 职场文书
老公婚前保证书
2015/02/28 职场文书
观后感开头
2015/06/19 职场文书
观看《信仰》心得体会
2016/01/15 职场文书
浅谈Python从全局与局部变量到装饰器的相关知识
2021/06/21 Python
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技
Three.js实现雪糕地球的使用示例详解
2022/07/07 Javascript