Home > Web Front-end > JS Tutorial > 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

WBOY
Release: 2016-05-16 16:25:34
Original
1920 people have browsed it

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

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

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">
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="">
YouTube

5、Vimeo

Copy code The code is as follows:

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

6. QuickTime Video

Copy code The code is as follows:

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:

3. Summary

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template