jQuery图片特效脚本prettyPhoto简介

prettyPhoto是一款基于jquery的轻量级的lightbox图片特效脚本，它不仅支持图片，还同时支持视频、flash、 YouTube、iframe和ajax。而且prettyPhoto配置和使用都十分简单，扩展性也不错，你可以最大限度地自定义 prettyPhoto。prettyPhoto兼容大部分主流的浏览器，有些Wordpress图片插件就是基于此脚本制作的。

比如：Wordpress插件：Royal PrettyPhoto

建议英文好的朋友直接去官网上了解这个插件的用法，如果你的英文很烂，那么也别急，下面我就给大家来一一介绍prettyPhoto的使用方法。

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

一、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>

jQuery图片特效脚本prettyPhoto简介相关推荐

精心挑选的23款美轮美奂的 jQuery 图片特效插件
jQuery是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入各种 ...
Jquery图片特效
有左右按键交互展示效果,特别突出之处是产品图片有阴影效果,内似flash,是产品展示的首先特效,能增强网站的品味及产品的时间又一个围剿Flash jQuery图片特效,运动比较流畅流畅,有左右按键交 ...
jQuery图片播放插件prettyPhoto使用介绍
演示效果 http://www.17sucai.com/preview/131993/2014-07-09/mac-Bootstrap/gallery.html 点击之后的效果使用方法 Query ...
精心挑选的15款优秀 jQuery 文本特效插件和教程
今天这篇文章向大家分享15款精心挑选的优秀 jQuery 文本特效插件,都带有详细的使用教程.jQuery 是最流行和使用最广泛的 JavaScript 框架,它简化了 HTML 文档遍历,事件处理, ...
7个不容错过的jQuery图片动画及源码
jQuery处理图片的例子特别多,因为图片动画特效可以让网页更加生动,当然,随着CSS3的的加入,jQuery在处理图片方面更为优秀,出来的效果也更加迷人.本文要分享一些基于jQuery的图片动画效果 ...
html5图片动画源码,不容错过的jQuery图片动画及源码
本文作者html5tricks,转载请注明出处 jQuery处理图片的例子特别多,因为图片动画特效可以让网页更加生动,当然,随着CSS3的的加入,jQuery在处理图片方面更为优秀,出来的效果也更加迷 ...
可进可退，jQuery图片、视频、flash播放插件prettyPhoto使用记录
一.prettyPhoto简介 prettyPhoto是一款基于jquery的轻量级的lightbox图片播放浏览插件,它不仅支持图片,还同时支持视频.flash.YouTube.iframe和aja ...
jQuery图片翻转弹出动画特效
详细内容请点击今天我们要来分享一款效果很酷的jQuery图片弹出动画,该动画一共有6组,除了第一组普通弹出外,其他图片弹出的时候均会出现各种不同的翻转动画效果,另外有几组的图片时旋转弹出的,效果也非 ...
分享8款简单大气的jQuery/CSS3图片特效
自从jQuery问世以后,网页上就流行很多漂亮的图片效果,像淡入淡出或者焦点图等,但是,现在jQuery结合CSS3,我们可以打造更美观更实用的图片特效.下面分享8款简单而又大气的jQuery/CSS ...
jQuery图片自动轮转动画特效
本例的功能是用jQuery图片自动轮转动画特效实现阿里巴巴首页图片动画效果. 所用到的图片截图: 从网上下载一个jQuery文件jquery.js: 具体HTML网页代码如下: <!DOCTYP ...

jQuery图片特效脚本prettyPhoto简介

jQuery图片特效脚本prettyPhoto简介相关推荐

最新文章

热门文章