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日期选择器并自动加入到输入框中示例代码
Aug 02 Javascript
js中replace的用法总结
Dec 27 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 Javascript
详细分析JavaScript函数定义
Jul 16 Javascript
jquery过滤特殊字符',防sql注入的实现方法
Aug 17 Javascript
js实现碰撞检测特效代码分享
Oct 16 Javascript
js仿百度音乐全选操作
Jan 13 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 Javascript
微信小程序实现运动步数排行功能(可删除)
Jul 05 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
Aug 04 Javascript
JavaScript事件循环及宏任务微任务原理解析
Sep 02 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
php 中英文语言转换类
2011/09/07 PHP
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
PHP中substr_count()函数获取子字符串出现次数的方法
2016/01/07 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
javascript Ext JS 状态默认存储时间
2009/02/15 Javascript
js过滤数组重复元素的方法
2010/09/05 Javascript
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
javascript 闭包详解
2015/07/02 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
js使用i18n实现页面国际化的方法
2017/05/09 Javascript
webuploader分片上传的实现代码(前后端分离)
2018/09/10 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
JavaScript使用canvas绘制随机验证码
2020/02/17 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
Python 爬虫的工具列表大全
2016/01/31 Python
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
Django REST framework 分页的实现代码
2019/06/19 Python
关于 Python opencv 使用中的 ValueError: too many values to unpack
2019/06/28 Python
Python自动巡检H3C交换机实现过程解析
2020/08/14 Python
Python利用socket模块开发简单的端口扫描工具的实现
2021/01/27 Python
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
市场部规章制度
2014/01/24 职场文书
博士毕业生自我鉴定范文
2014/04/13 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
工人先进事迹材料
2014/12/26 职场文书
2016天猫双十一广告语
2016/01/28 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书