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 27 Javascript
基于Jquery的简单图片切换效果
Jan 06 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
Jan 17 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 Javascript
jQuery实现类似淘宝网图片放大效果的方法
Jul 08 Javascript
基于javascript实现页面加载loading效果
Sep 15 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
Nov 22 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
基于js 本地存储(详解)
Aug 16 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
Sep 10 Javascript
浅谈JavaScript作用域和闭包
Sep 18 Javascript
Vue之Vue.set动态新增对象属性方法
Feb 23 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
多重?l件?合查?(一)
2006/10/09 PHP
php email邮箱正则
2008/10/08 PHP
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
PHP程序员常见的40个陋习,你中了几个?
2014/11/20 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
使用IE6看老赵的博客 jQuery初探
2010/01/17 Javascript
js中匿名函数的创建与调用方法分析
2014/12/19 Javascript
基于JavaScript实现定时跳转到指定页面
2016/01/01 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
vue.js评论发布信息可插入QQ表情功能
2017/08/08 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
JavaScript实现省市联动效果
2019/11/22 Javascript
WebPack工具运行原理及入门教程
2020/12/02 Javascript
python实现的简单FTP上传下载文件实例
2015/06/30 Python
django模板语法学习之include示例详解
2017/12/17 Python
Python3 中把txt数据文件读入到矩阵中的方法
2018/04/27 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
浅谈python中get pass用法
2019/03/19 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
80后职场人的职业生涯规划
2014/03/08 职场文书
计划生育工作汇报
2014/10/28 职场文书
大雁塔导游词
2015/02/04 职场文书
员工家属慰问信
2015/03/24 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书
新员工入职感想
2015/08/07 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
女性励志书籍推荐
2019/08/19 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers
python blinker 信号库
2022/05/04 Python