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 相关文章推荐
dess中一个简单的多路委托的实现
Jul 20 Javascript
Tips 带三角可关闭的文字提示
Oct 06 Javascript
jQuery弹性滑动导航菜单实现思路及代码
May 02 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 Javascript
js实现数组去重方法及效率?Ρ? target=
Feb 14 Javascript
微信小程序页面间通信的5种方式
Mar 31 Javascript
vue.js编译时给生成的文件增加版本号
Sep 17 Javascript
在vue项目中,将juery设置为全局变量的方法
Sep 25 Javascript
优雅的elementUI table单元格可编辑实现方法详解
Dec 23 Javascript
解决vue跨域axios异步通信问题
Apr 17 Javascript
JS实现网页端猜数字小游戏
Mar 06 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中GET变量的使用
2006/10/09 PHP
浅谈PHP变量作用域以及地址引用问题
2013/12/27 PHP
PHP获取Exif缩略图的方法
2015/07/13 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
php链式操作的实现方式分析
2019/08/12 PHP
Js基础学习资料
2010/11/23 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
JavaScript事件详细讲解
2016/06/27 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
Bootstrap警告框(Alert)插件使用方法
2017/03/21 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
解决jQuery使用append添加的元素事件无效的问题
2018/08/30 jQuery
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
Python赋值语句后逗号的作用分析
2015/06/08 Python
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
python读取Excel实例详解
2018/08/17 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
Python 词典(Dict) 加载与保存示例
2019/12/06 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
python下载的库包存放路径
2020/07/27 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
求职简历的自我评价
2014/01/31 职场文书
教学改革问题查摆整改措施
2014/09/27 职场文书
小学班主任自我评价
2015/03/11 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
Vue2.0搭建脚手架
2022/03/13 Vue.js