Introduction to jQuery image special effect script prettyPhoto,

Introduction to jQuery image special effect script prettyPhoto,

PrettyPhoto is a jquery-based lightweight lightbox image special effect script. It not only supports images, but also supports 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. PrettyPhoto is compatible with most mainstream browsers. Some Wordpress image extensions are based on this script.

For example, Wordpress Plugin: Royal PrettyPhoto

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.

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

I. Introduction to prettyPhoto

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

<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.

1. $ (Document). ready (function (){
2. $ ("A [rel ^ = 'prettyphoto ']"). prettyPhoto ();
3. });

The following is the html code of each type.

1. Single Image

1. <A href = "images/fullscreen/2.jpg" rel =" prettyPhoto "title =" This is the description ">
3. </A>

2. Image album

1. <A href = "images/fullscreen/1.jpg" rel =" prettyPhoto [pp_gal] "title =" You can add caption to pictures. ">
3. </A>
4. <A href = "images/fullscreen/2.jpg" rel =" prettyPhoto [pp_gal] ">
6. </A>
7. <A href = "images/fullscreen/3.jpg" rel =" prettyPhoto [pp_gal] ">
9. </A>
10. <A href = "images/fullscreen/4.jpg" rel =" prettyPhoto [pp_gal] ">
12. </A>
13. <A href = "images/fullscreen/5.jpg" rel =" prettyPhoto [pp_gal] ">
15. </A>

3. A single flash

1. <A href = "http://www.adobe.com/products/flashplayer/include/marquee/design.swf? Width = 792 & amp; height = 294"
2. Rel = "prettyPhoto [flash]" title = "Flash 10 demo">
4. </A>

4. YouTube videos

1. <A href = "http://www.youtube.com/watch? V = qqXi8WmQ_WM "rel =" prettyPhoto "title =" ">
3. </A>

5. Vimeo

1. <A href = "http://vimeo.com/8245346" rel = "prettyPhoto" title = "">
3. </A>

6. QuickTime video

1. <A title = "Despicable Me" rel = "prettyPhoto [movies]"
2. Href = "http://trailers.apple.com/movies/universal/despicableme/despicableme-tlr1_r640s.mov? Width = 640 & height = 360 ">
4. </A>
5. <A title = "Tales from Earthsea" rel = "prettyPhoto [movies]"
6. Href = "http://trailers.apple.com/movies/disney/talesfromearthsea/talesfromearthsea-tlr1_r640s.mov? Width = 640 & height = 340 ">
8. </A>
9. <A title = "Grease Sing-A-Long" rel = "prettyPhoto [movies]"
10. Href = "http://trailers.apple.com/movies/paramount/greasesingalong/greasesingalong-tlr1_r640s.mov? Width = 640 & height = 272 ">
12. </A>

7. external website (iframe)

1. <A href = "http://www.google.com? Iframe = true & width = 100% & height = 100%"
2. Rel = "prettyPhoto [iframes]" title = "Google.com opened at 100%"> Google.com </a>
3. <A href = "http://www.apple.com? Iframe = true & width = 500 & height = 250 "rel =" prettyPhoto [iframes] "> Apple.com </a>
4. <A href = "http://www.twitter.com? Iframe = true & width = 400 & height = 200 "rel =" prettyPhoto [iframes] "> Twitter.com </a>

8. common text

1. <A href = "# inline-1" rel = "prettyPhoto"> </a>
2. <Div id = "inline-1" class = "hide">
3. <P> common text </p>
4. <P> the prettyPhoto introduced to you today is the html for normal text playback. </p>
5. </Div>

9. AJAX content

1. <A rel = "prettyPhoto [ajax]" href = "/demos/prettyPhoto-jquery-lightbox-clone/xhr_response.html?
2. Ajax = true & width = 325 & height = 185 "> Ajax content </a>

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.