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实现无刷新更新数据的详细步骤 asp
Dec 26 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
Feb 22 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
如何实现移动端浏览器不显示 pc 端的广告
Oct 15 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
Jun 09 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 Javascript
JS实现简易换图时钟功能分析
Jan 04 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
vue-router的hooks用法详解
Jun 08 Javascript
何时/使用 Vue3 render 函数的教程详解
Jul 25 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操作MongoDB的技术总结
2013/06/02 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
php自定义函数截取汉字长度
2014/05/15 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
PHP数组Key强制类型转换实现原理解析
2020/09/01 PHP
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
jqPlot Option配置对象详解
2009/07/25 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
jQuery根据name属性进行查找的用法分析
2016/06/23 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
jQuery实现的form转json经典示例
2017/10/10 jQuery
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
vue远程加载sfc组件思路详解
2019/12/25 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
复制粘贴功能的Python程序
2008/04/04 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
Python之修改图片像素值的方法
2019/07/03 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
德国汉莎航空中国官网: Lufthansa中国
2017/03/30 全球购物
家居设计专业个人自荐信范文
2013/11/26 职场文书
授权委托书格式模板
2014/04/03 职场文书
护理专业求职信
2014/06/15 职场文书
土建专业毕业生自荐书
2014/07/04 职场文书
公司离职证明标准格式
2014/11/18 职场文书
2015年学校管理工作总结
2015/07/20 职场文书
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python