Detailed explanation on the use of jquery image playback plug-in prettyPhoto_jquery

Detailed explanation on the use of jquery image playback plug-in prettyPhoto_jquery. Introduction to prettyPhoto

PrettyPhoto is a lightweight lightbox image playback plug-in based on jquery. It not only supports images, but also supports videos, flash, YouTube, iframe and ajax. Moreover, prettyPhoto is very simple to configure and use, and has good scalability. You can customize prettyPhoto to the maximum extent. Currently, prettyPhoto is compatible with most mainstream browsers, including the confusing IE6.

PrettyPhoto plug-in project address: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

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

2. Introduction to how to use prettyPhoto

Detailed explanation on the use of jquery image playback plug-in prettyPhoto_jquery. Introduce jquery core library, prettyPhoto plug-in library and prettyPhoto style sheet file

Copy code The code is as follows:

2. Initialize the jquery plug-in. The following is the simplest configuration js code

Copy code The code is as follows:

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

Here are the html codes for each type

Detailed explanation on the use of jquery image playback plug-in prettyPhoto_jquery. Single picture

Copy code The code is as follows:

2. Picture Album

Copy code The code is as follows:

3. Single flash

Copy code The code is as follows:

http://www.adobe.com/products/flashplayer/include/marquee/design.swf?width=792&height=294"
rel="prettyPhoto[flash]" title="Flash Detailed explanation on the use of jquery image playback plug-in prettyPhoto_jquery0 demo">

4. YouTube video

Copy code The code is as follows:

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

5、Vimeo

Copy code The code is as follows:

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

6. QuickTime Video

Copy code The code is as follows:

http://trailers.apple.com/movies/universal/despicableme/despicableme-tlrDetailed explanation on the use of jquery image playback plug-in prettyPhoto_jquery_r640s.mov?width=640&height=360 "> http://trailers.apple.com/movies/disney/talesfromearthsea/talesfromearthsea-tlrDetailed explanation on the use of jquery image playback plug-in prettyPhoto_jquery_r640s.mov?width=640&height= 340"> a> http://trailers.apple.com/movies/paramount/greasesingalong/greasesingalong-tlrDetailed explanation on the use of jquery image playback plug-in prettyPhoto_jquery_r640s.mov ?width=640&height=272">

7. External website (iframe)

Copy code The code is as follows:

http://www.google.com?iframe=true&width=Detailed explanation on the use of jquery image playback plug-in prettyPhoto_jquery00%&height=Detailed explanation on the use of jquery image playback plug-in prettyPhoto_jquery00%"
rel="prettyPhoto[iframes]" title="Google.com opened at Detailed explanation on the use of jquery image playback plug-in prettyPhoto_jquery00%">Google.com
http://www.apple.com?iframe=true&width=500&height=250" rel="prettyPhoto[iframes]">Apple.com
http://www.twitter.com?iframe=true&width=400&height=200" rel="prettyPhoto[iframes]">Twitter.com

8. Normal text

Copy code The code is as follows:

This is normal text

I hope you will like the prettyPhoto I introduce to you today. This is html that plays ordinary text

9. AJAX content

Copy code The code is as follows:

Ajax content

3. Summary

The prettyBox picture player plug-in is very useful, use it to create your own exclusive photo album!