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 相关文章推荐
js setattribute批量设置css样式
Nov 26 Javascript
jQueryUI如何自定义组件实现代码
Nov 14 Javascript
深入理解js中的加载事件
Feb 08 Javascript
jQuery模拟淘宝购物车功能
Feb 27 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
vue-router 路由基础的详解
Oct 17 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
JavaScript实现删除数组重复元素的5种常用高效算法总结
Jan 18 Javascript
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
javascript动态创建对象的属性详解
Nov 07 Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 Javascript
重置Redux的状态数据的方法实现
Nov 18 Javascript
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
thinkphp中的url跳转用法分析
2016/07/12 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
Open and Print a Word Document
2007/06/15 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
2016/06/10 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
2016/07/07 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
React+TypeScript+webpack4多入口配置详解
2019/08/08 Javascript
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
vue 翻页组件vue-flip-page效果
2020/02/05 Javascript
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
浅析PHP与Python进行数据交互
2018/05/15 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
Django实现跨域请求过程详解
2019/07/25 Python
详解Python中的编码问题(encoding与decode、str与bytes)
2020/09/30 Python
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
欧铁通票官方在线销售网站:Eurail.com
2017/10/14 全球购物
如何通过jdbc调用存储过程
2012/04/19 面试题
运动会稿件200字
2014/02/07 职场文书
学生会离职感言
2014/02/11 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
大学社团计划书
2014/05/01 职场文书
介绍信范文大全
2015/05/07 职场文书
医院员工辞职信范文
2015/05/12 职场文书
2015年医院保卫科工作总结
2015/07/23 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python