Jquery image playback and browsing plug-in prettyPhoto,

Jquery image playback and browsing plug-in prettyPhoto,

1. Introduction to prettyPhoto

PrettyPhoto is a jquery-based lightweight lightbox image playback and browsing plug-in that supports not only images, but also videos, flash, YouTube, iframe, and ajax. In addition, prettyPhoto is easy to configure and use, and has good scalability. You can customize prettyPhoto as much as possible. Currently, prettyPhoto is compatible with most mainstream browsers, including the tangled IE6.

Project address for the prettyPhoto plug-in: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

It is recommended that good English friends go to the official website to learn how to use this plug-in. If your English is poor, don't worry. Next I will introduce you to prettyPhoto one by one.

II. Introduction to prettyPhoto

1. Introduce the jquery core library, prettyPhoto plug-in library, and prettyPhoto style sheet files.

Copy codeThe Code is 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 js Code.

Copy codeThe Code is as follows:
$ (Document). ready (function (){
$ ("A [rel ^ = 'prettyphoto ']"). prettyPhoto ();
});

The following is the html code of each type.

1,Single Image

Copy codeThe Code is as follows:
<A href = "images/fullscreen/2.jpg" rel =" prettyPhoto "title =" This is the description ">

</A>

2,Image album

Copy codeThe Code is 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 codeThe Code is as follows:
<A href = "http://www.adobe.com/products/flashplayer/include/marquee/design.swf? Width = 792 & height = 294"
Rel = "prettyPhoto [flash]" title = "Flash 10 demo">

</A>

4,YouTube video

Copy codeThe Code is as follows:
<A href = "http://www.youtube.com/watch? V = qqXi8WmQ_WM "rel =" prettyPhoto "title =" ">

</A>

5,Vimeo

Copy codeThe Code is as follows:
<A href = "http://vimeo.com/8245346" rel = "prettyPhoto" title = ""> </a>

6,QuickTime video

Copy codeThe Code is 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 "> </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 codeThe Code is 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,Common text

Copy codeThe Code is as follows:
<A href = "# inline-1" rel = "prettyPhoto"> </a>
<Div id = "inline-1" class = "hide">
<P> common text </p>
<P> the prettyPhoto introduced to you today is the html for normal text playback. </p>
</Div>

9,AJAX content

Copy codeThe Code is as follows:
<A rel = "prettyPhoto [ajax]" href = "/demos/prettyPhoto-jquery-lightbox-clone/xhr_response.html?
Ajax = true & width = 325 & height = 185 "> Ajax content </a>

Iii. Summary

The prettyBox image playback plug-in is very useful. Use it to create your exclusive album!