jquery圖片播放瀏覽外掛prettyPhoto使用詳解_jquery

一、prettyPhoto簡介

prettyPhoto是基於jquery的輕量級的lightbox圖片播放瀏覽插件，它不僅支援圖片，還同時支援影片、flash、jquery圖片播放瀏覽外掛prettyPhoto使用詳解_jquery、iframe和ajax。而且prettyPhoto配置和使用都很簡單，擴充性也不錯，你可以最大限度地自訂prettyPhoto。目前，prettyPhoto相容於大部分主流的瀏覽器，包括令人糾結的IE6。

prettyPhoto外掛程式的項目位址：http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

建議英文好的朋友直接去官網上了解這個插件的用法，如果你的英文很爛，那麼也別急，下面我就給大家來一一介紹prettyPhoto的使用方法。

二、prettyPhoto使用方法介紹

jquery圖片播放瀏覽外掛prettyPhoto使用詳解_jquery、引入jquery核心庫和prettyPhoto外掛程式庫以及prettyPhoto樣式表檔

複製程式碼 程式碼如下:

2、初始化jquery插件，以下是最簡單的配置的js程式碼

複製程式碼 程式碼如下:

$(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
});

以下是每種類型的html程式碼

jquery圖片播放瀏覽外掛prettyPhoto使用詳解_jquery、單張圖片

複製程式碼 程式碼如下:

2、圖片相簿

複製程式碼 程式碼如下:

3、單一flash

複製程式碼 程式碼如下:

http://www.adobe.com/products/flashplayer/include/marquee/design.swf?width=792&height=294"
rel="prettyPhoto[flash]" title="Flash jquery圖片播放瀏覽外掛prettyPhoto使用詳解_jquery0 demo">

4、jquery圖片播放瀏覽外掛prettyPhoto使用詳解_jquery影片

複製程式碼 程式碼如下:

http://www.youtube.com/watch?v=qqXi8WmQ_WM" rel="prettyPhoto" title="">

5、Vimeo

複製程式碼 程式碼如下:

http://vimeo.com/8245346" rel="prettyPhoto" title="">

6、QuickTime影片

複製程式碼 程式碼如下:

http://trailers.apple.com/movies/universal/despicableme/despicableme-tlrjquery圖片播放瀏覽外掛prettyPhoto使用詳解_jquery_r640s.mov?width=640&height=360"> http://trailers.apple.com/movies/disney/talesfromearthsea/talesfromearthsea-tlrjquery圖片播放瀏覽外掛prettyPhoto使用詳解_jquery_r640s.mov?width=640&heightarthsea-tlrjquery圖片播放瀏覽外掛prettyPhoto使用詳解_jquery_r640s.mov?width=640&height=340 ">

7、

外部網站（iframe）

複製程式碼 程式碼如下:

" rel="prettyPhoto[iframes]" title="Google.com opened at jquery圖片播放瀏覽外掛prettyPhoto使用詳解_jquery00%">Google.com
" rel="prettyPhoto[iframes]">Apple.com " rel="prettyPhoto[iframes]">Twitter.com

8、

普通文字

複製程式碼 程式碼如下:

   

這裡是普通的文字

   

今天要跟大家介紹的prettyPhoto希望大家能喜歡，這就是播放普通文字的html

9、

AJAX內容

複製程式碼 程式碼如下:

Ajax content

三、總結

prettyBox圖片播放插件很好用，趕快用它來打造你的專屬相簿吧！