jquery image Playback Browse plugin Prettyphoto use detailed _jquery

Introduction of Prettyphoto

Prettyphoto is a lightweight, jquery-based lightbox image playback browser that supports not only images but also video, Flash, YouTube, IFRAME, and Ajax. and Prettyphoto configuration and use are very simple, scalability is also good, you can maximize the customization of Prettyphoto. Currently, Prettyphoto is compatible with most of the mainstream browsers, including the tangled IE6.

Prettyphoto Plugin's project address: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

Suggested that English good friend directly to the official website to understand this plug-in usage, if your English is very bad, then also do not worry, below I will give everybody to introduce the Prettyphoto use method.

Ii. introduction of Prettyphoto use method

1, the introduction of the jquery Core library and Prettyphoto plug-in library and Prettyphoto style sheet files

Copy Code code as follows:

<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, initialize the jquery plug-in, the following is the simplest configuration of the JS code

Copy Code code as follows:

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

Here are the HTML codes for each type

1. Single picture

Copy Code code as follows:

<a href= "images/fullscreen/2.jpg" rel= "Prettyphoto" title= "This is the description" >

</a>

2. Photo album

Copy Code code as follows:

<a href= "images/fullscreen/1.jpg" rel= "Prettyphoto[pp_gal" "title=" you can add caption to pictures. " >

</a>
<a href= "images/fullscreen/2.jpg" rel= "Prettyphoto[pp_gal]" >

</a>
<a href= "images/fullscreen/3.jpg" rel= "Prettyphoto[pp_gal]" >

</a>
<a href= "images/fullscreen/4.jpg" rel= "Prettyphoto[pp_gal]" >

</a>
<a href= "images/fullscreen/5.jpg" rel= "Prettyphoto[pp_gal]" >

</a>

3. Single Flash

Copy Code code as follows:

<a href= "http://www.adobe.com/products/flashplayer/include/marquee/design.swf?width=792&height=294"
Rel= "Prettyphoto[flash]" title= "Flash demo" >
</a>

4,YouTube video

Copy Code code as follows:

<a href= "Http://www.youtube.com/watch?v=qqXi8WmQ_WM" rel= "Prettyphoto" "title=" ">

</a>

5,Vimeo

Copy Code code as follows:

<a href= "http://vimeo.com/8245346" rel= "Prettyphoto" "title=" ">

6,QuickTime film

Copy Code code as follows:

<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= "/> </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 "> </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 "> </a>

7. External website (iframe)

Copy Code code as follows:

<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, Ordinary text

Copy Code code as follows:

<a href= "#inline-1" rel= "Prettyphoto" ></a>
<div id= "inline-1" class= "Hide" >
<p> here is the plain text </p>
<p> today to introduce the Prettyphoto hope you can enjoy, this is the play of ordinary text html</p>
</div>

9.Ajax Content

Copy Code code as follows:

<a rel= "Prettyphoto[ajax" "href="/demos/prettyphoto-jquery-lightbox-clone/xhr_response.html?
ajax=true&width=325&height=185 ">ajax content</a>

Third, summary

Prettybox Picture Playback plug-in is very good, hurriedly use it to create your exclusive album Bar!