首頁 > web前端 > js教程 > jquery圖片播放瀏覽外掛prettyPhoto使用詳解_jquery

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

WBOY
發布: 2016-05-16 16:25:34
原創
1935 人瀏覽過

一、prettyPhoto簡介

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

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">
Flash jquery圖片播放瀏覽外掛prettyPhoto使用詳解_jquery0 demo

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

複製程式碼 程式碼如下:

http://www.youtube.com/watch?v=qqXi8WmQ_WM" rel="prettyPhoto" title="">
jquery圖片播放瀏覽外掛prettyPhoto使用詳解_jquery

5、Vimeo

複製程式碼 程式碼如下:

http://vimeo.com/8245346" rel="prettyPhoto" title=""> jquery圖片播放瀏覽外掛prettyPhoto使用詳解_jquery

6、QuickTime影片

複製程式碼 程式碼如下:
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圖片播放插件很好用,趕快用它來打造你的專屬相簿吧!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板