15 attractive jquery lightbox plug-ins that developers should know

Jquery is a very popular JS framework and has become a necessary tool for developers. The jquery lightbox plug-in is also a favorite of developers. One of its striking features is that the jquery lightbox plug-in has changed a lot. You can easily create any simple image library into an attractive and visually appealing interface. In the design field, lighbox is one of the most used plug-ins.

So here I have collected 15 amazing jquery lightbox plug-ins for your next project, theyIt provides designers with many different forms of presentation. You can modify them as needed.

Jquery lightbox plug-in

He is a simple and powerful lightbox developed based on jquery.Control, you can load MP3, video, and image in this form, very good

Lightview jquery plug-in

Highslide lightbox plug-in

The content of the lightbox control of highslide JS can be images, HTML pages, scrolling HTML pages, content loaded through Ajax, IFRAME, and Flash. If you want to create a dynamic interaction content, this is a good choice.

Lightbox 2

Lightbox2 is developed based on prototype and scriptaculous. It is an easy-to-use lightbox control.

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.

I. Introduction to prettyphoto

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

 
1<SCRIPT src = "JS/jquery. js" type = "text/JavaScript" charset = "UTF-8"> </SCRIPT>2<LINK rel = "stylesheet" href = "CSS/prettyphoto.css" type = "text/CSS" Media = "screen" charset = "UTF-8"/>3<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 JSCode

$ (Document). Ready (Function() {$ ("A [rel ^ = 'prettyphoto ']"). Prettyphoto ();});
 

The following is the HTML code of each type.

1. Single Image

     <  A  Href  = "Images/fullscreen/2.jpg"  REL  = "Prettyphoto"  Title  = "This is the description"  >         <  IMG SRC  = "Images/thumbnails/t_2.jpg"  Width  = "60"  Height  = "60"  ALT  = "This is the title"   />         </  A  >   

2. Image album

     <  A  Href  = "Images/fullscreen/1.jpg" REL  = "Prettyphoto [pp_gal]"  Title  = "You can add caption to pictures ."  >         <  IMG  SRC  = "Images/thumbnails/t_1.jpg"  Width  = "60"  Height  = "60"  ALT  = "Red round shape"   />        </  A  >         <  A  Href  = "Images/fullscreen/2.jpg"  REL  = "Prettyphoto [pp_gal]"  >         <  IMG  SRC  = "Images/thumbnails/t_2.jpg"  Width  = "60" Height  = "60"  ALT  = "Nice building"   />         </  A  >         <  A  Href  = "Images/fullscreen/3.jpg"  REL  = "Prettyphoto [pp_gal]"  >         <  IMG SRC  = "Images/thumbnails/t_3.jpg"  Width  = "60"  Height  = "60"  ALT  = "Fire! "   />         </  A  >         <  A  Href  = "Images/fullscreen/4.jpg"  REL = "Prettyphoto [pp_gal]"  >         <  IMG  SRC  = "Images/thumbnails/t_4.jpg"  Width  = "60"  Height  = "60"  ALT  = "Rock Climbing"   />         </  A  >         < A  Href  = "Images/fullscreen/5.jpg"  REL  = "Prettyphoto [pp_gal]"  >         <  IMG  SRC  = "Images/thumbnails/t_5.jpg"  Width  = "60"  Height  = "60"  ALT  = "Fly kite, fly! "  />         </  A  >   

3. A single flash

     <  A  Href  = "Http://www.adobe.com/products/flashplayer/include/marquee/design.swf? Width = 792 & amp; Height = 294"  REL  = "Prettyphoto [Flash]"  Title  = "Flash 10 Demo"  >         <  IMG SRC  = "Images/thumbnails/flash-logo.jpg"  ALT  = "Flash 10 Demo"  Width  = "60"   />         </  A  >   

4youtube video

    A   href   =" http://www.youtube.com/watch? V = qqxi8wmq_wm "  rel  =" prettyphoto "  title  =" " >    IMG   SRC   =" images/thumbnails/flash-logo.jpg "  alt   =" YouTube "  width   =" 60 " />     A  > 

5. Vimeo

 
<AHref= "Http://vimeo.com/8245346"REL= "Prettyphoto"Title= ""><IMGSRC= "Images/thumbnails/flash-logo.jpg"ALT= "YouTube"Width= "60" /></A>
 

6. Quicktime video

     <  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  = "50"   />         </  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"  >         <  IMG  SRC  = "/WP-content/themes/nmfe/images/thumbnails/quicktime-logo.png"  ALT  = "Tales From Earthsea"  Width  = "50"   />         </  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"  >         <  IMG  SRC  = "/WP-content/themes/nmfe/images/thumbnails/quicktime-logo.png"  ALT = "Grease sing-a-long"  Width  = "50"   />         </  A  >   

7. external website (IFRAME)

     <  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

     <  A  Href  = "# Inline-1"  REL  = "Prettyphoto"  > <  IMG  SRC  = "/WP-content/themes/nmfe/images/thumbnails/earth-logo.jpg"  ALT  = ""  Width  = "50"   /> </  A  >         <  Div  ID  = "Inline-1"  Class = "Hide"  >             <  P  > Here is a common text </  P  >             <  P  > The prettyphoto introduced to you today is the HTML for playing common text. </  P  >         </  Div >   

9. Ajax content

 
<AREL= "Prettyphoto [Ajax]"Href= "/Demos/prettyphoto-jquery-lightbox-clone/xhr_response.html? Ajax = true & width = 325 & Height = 185">Ajax content</A>
 

 

Pirobox extended v.1.0.

Lightbox control developed by jquery. The image size can be adjusted automatically based on the browser form size. Provides forward/backward control links. Dynamically load image effects. Easy to customize.

Greybox

Greybox is a component of the mask layer, also known as the mode window or mode window (the so-called Mode window, that is, unless effective close means are adopted, the user's mouse focus or the input cursor will remain on the window), it can generate a good interface after running. Similar to thinkbox and lightbox. Displays pages, images, or other content in a unique mode dialog box. This is its official website: http://orangoo.com/labs/GreyBox/

Slimbox 2 jquery lightbox plugin

WordPress jquery lightbox plugin

Litebox jquery plugin

Colorbox

Shadowbox jquery lightbox plugin

Dialog

Flexible lightbox

Basic beginners' guide to installing a jquery lightbox

 

You may also like:

1. we recommend 17 elegant and fresh jquery tooltip plug-ins.
2. parallax scrolling tutorial (large background effect) implemented by jquery
3. we recommend 60 impressive jquery image galleries, lightbox, labels, menus, text effects
4. 30 new and practical jquery plug-ins to improve front-end development
5. 30 excellent and practical jquery framework plug-ins (visual background, waterfall Streaming Effect)
6. the latest Ajax tutorials and technologies I have collected (Part 1)