30个最好的jQuery 灯箱插件

痛定思痛。 2022-01-13 07:27 352阅读 0赞

jQuery 是非常流行的JS框架，其俨然已成了开发者的必备工具，其中的jQuery Lightbox插件更是为广大开发者所喜爱。它惊人的特征之一是jQuery Lightbox插件有很多变化。

下面介绍30个最好的jQuery Lightbox 插件，别忘了收藏它，以防未来的设计中错过它们中的一个。

**1. [Fancy Zoom (jQuery)][Fancy Zoom _jQuery]**

几天前，John重写了Cabel Sasser的FancyZoom，在Prototype和Scriptaculous程序库上。我将它引入到jQuery，并做了一些改进。  
[![clip\_p\_w\_picpath001][clip_p_w_picpath001]][Fancy Zoom _jQuery]

**[View Live Demo][]**

**2. [Lightbox2][]**

支持所有浏览器的简单易用的Lightbox插件。[![clip\_p\_w\_picpath002][clip_p_w_picpath002]][Lightbox2]

**[View Live Demo][Lightbox2]**

**3. [jQuery Lightbox Plugin (balupton edition)][jQuery Lightbox Plugin _balupton edition]**

添加一些效果HTML文本中，可用的效果包括阴影，渐变镜等。  
[![clip\_p\_w\_picpath003][clip_p_w_picpath003]][jQuery Lightbox Plugin _balupton edition]

**[View Live Demo][View Live Demo 1]**

**4. [LightWindow v2.0][]**

LightWindow是一款基于Prototype，类似于Lightbox灯箱效果的JS特效。其特点在于高度可定制，支持**多种类型**的媒体显示。  
[![clip\_p\_w\_picpath004][clip_p_w_picpath004]][LightWindow v2.0]

**[View Live Demo][View Live Demo 2]**

**5. [Colorbox Lightbox Plugin][]**

ColorBox是个轻量级的可定制化的灯箱插件，支持jQuery 1.3 和 1.4。  
[![clip\_p\_w\_picpath005][clip_p_w_picpath005]][Colorbox Lightbox Plugin]

**[View Live Demo][View Live Demo 3]**

**6. [FaceBox][]**

Facebox 是个Facebook风格的灯箱插件，可以显示图片、Divs，或者整个远程页面。[![clip\_p\_w\_picpath006][clip_p_w_picpath006]][FaceBox]

**[View Live Demo][FaceBox]**

**7. [jQuery Lightbox][]**

jQuery Lightbox已经成为Google Code上面的项目。每个人都可以对其作出自己的变化。[![clip\_p\_w\_picpath007][clip_p_w_picpath007]][jQuery Lightbox]

**[View Live Demo][View Live Demo 4]**

**8. [Milkbox][]**

Milkbox具有很多的新功能，比如画廊对象的定义、flashvars、html文件等。同时，你也可以安全的使用它通过mootools VX兼容模式。它已经支持IE9。

[![clip\_p\_w\_picpath008][clip_p_w_picpath008]][Milkbox]

**[View Live Demo][Milkbox]**

**9. [FancyBox][]**

FancyBox可以显示图片、HTML内容、及多媒体。[![clip\_p\_w\_picpath009][clip_p_w_picpath009]][FancyBox]

**[View Live Demo][FancyBox]**

**10. [Visual jQuery LightBox][]**

Visual jQuery LightBox，免费的向导程序，无需一行代码，就可以做成在线的画廊。[![clip\_p\_w\_picpath010][clip_p_w_picpath010]][Visual jQuery LightBox]

**[View Live Demo][View Live Demo 5]**

**11. [prettyPhoto][]**

prettyPhoto是jQuery lightbox的克隆。它支持图片、视频、flash、YouTube、iframes等。  
[![clip\_p\_w\_picpath011][clip_p_w_picpath011]][prettyPhoto]

**[View Live Demo][prettyPhoto]**

**12. [PIROBOX][]**

pirobox，其重要的一点是支持打开所有类型的文件，另外是自动的图片尺寸设定及拖曳。  
[![clip\_p\_w\_picpath012][clip_p_w_picpath012]][PIROBOX]

**[View Live Demo][PIROBOX]**

**13. [Shadowbox][]**

Shadowbox由JS和CSS编写，可高度定制。

[![clip\_p\_w\_picpath013][clip_p_w_picpath013]][Shadowbox]

**[View Live Demo][Shadowbox]**

**14. [Litebox jQuery Plugin][]**

Litebox是Lightbox V2.0的修改版，尺寸减小。[![clip\_p\_w\_picpath014][clip_p_w_picpath014]][Litebox jQuery Plugin]

**[View Live Demo][View Live Demo 6]**

**15. [ThickBox][]**

ThickBox是一个基于JQuery类库的扩展，它能在浏览器界面上显示非常棒的UI框， 它可以显示单图片，多图片，ajax请求内容或链接内容.

.[![clip\_p\_w\_picpath015][clip_p_w_picpath015]][ThickBox]

**[View Live Demo][ThickBox]**

**16. [Slightly ThickerBox][]**

Slightly ThickerBox是Cody Lindley的Thickbox的修改版。改版增加了翻页功能链接，也就是做你可以用它做画廊了。[![clip\_p\_w\_picpath016][clip_p_w_picpath016]][Slightly ThickerBox]

**[View Live Demo][Slightly ThickerBox]**

**17. [Suckerfish HoverLightbox][]**

第一眼就是非常漂亮。包括了Lokesh Dhakar 写的Lightbox JS。这些高手写出来的东西，拓展性很强。

[![clip\_p\_w\_picpath017][clip_p_w_picpath017]][Suckerfish HoverLightbox]

**[View Live Demo][View Live Demo 7]**

**18. [NyroModal][]**

设计师们就似乎更喜欢使用多模态窗口，为他们提供了一个快捷方式来表明无需重载整个页面的数据。它易于使用和易于设计。[![clip\_p\_w\_picpath018][clip_p_w_picpath018]][NyroModal]

**[View Live Demo][NyroModal]**

**19. [Lightview][]**

Lightview的建立是为了改变你在网页上覆盖内容的方式。[![clip\_p\_w\_picpath019][clip_p_w_picpath019]][Lightview]

**[View Live Demo][Lightview]**

**20. [Interface Imagebox][]**

Interface Imagebox是jQuery的接口插件。[![clip\_p\_w\_picpath020][clip_p_w_picpath020]][Interface Imagebox]

**[View Live Demo][Interface Imagebox]**

**21. [jQuery lightBox plugin][]**

jQuery lightBox plugin简单、优雅、乖巧。  
[![clip\_p\_w\_picpath021][clip_p_w_picpath021]][jQuery lightBox plugin]

**[View Live Demo][jQuery lightBox plugin]**

**22. [imgBox][]**

因此，在几个星期前我开始有挑战性的项目工作 - imgBox。 imgBox是一个jQuery插件，实现了对图像平滑变焦效果。 下载尝试一下吧？  
[![clip\_p\_w\_picpath022][clip_p_w_picpath022]][imgBox]

**[View Live Demo][View Live Demo 8]**

**23. [GreyBox jQuery Lightbox][]**

GreyBox jQuery Lightbox用最漂亮的方式显示站点、图片等内容。  
[![clip\_p\_w\_picpath023][clip_p_w_picpath023]][GreyBox jQuery Lightbox]

**[View Live Demo][View Live Demo 9]**

**24. [Picbox][]**

Picbox在Slimbox的基础上改进，它的特点在于自动调整尺寸大小，以及大图片的缩放功能。  
[![clip\_p\_w\_picpath024][clip_p_w_picpath024]][Picbox]

**[View Live Demo][Picbox]**

**25. [Lightbox Gone Wild][]**  
[![clip\_p\_w\_picpath025][clip_p_w_picpath025]][Lightbox Gone Wild]

**[View Live Demo][View Live Demo 10]**

**26. [SimpleModal][]**

SimpleModal，轻量级的jQuery插件，具有强大的界面。可认为他是模态窗口的框架，具有很强的灵活性。  
[![clip\_p\_w\_picpath026][clip_p_w_picpath026]][SimpleModal]

**[View Live Demo][View Live Demo 11]**

**27. [boxy][]**

[![clip\_p\_w\_picpath027][clip_p_w_picpath027]][boxy]

**[View Live Demo][View Live Demo 12]**

**28. [Highslide JS][]**

Highslide JS是图片、媒体、画廊的查看器。  
[![clip\_p\_w\_picpath028][clip_p_w_picpath028]][Highslide JS]

**[View Live Demo][Highslide JS]**

**29. [Slimbox 2][]**

Slimbox 2 是Lighbox 2的克隆，100%兼容Lightbox 2。它非常小巧、友好，仅4KB。  
[![clip\_p\_w\_picpath029][clip_p_w_picpath029]][Slimbox 2]

**[View Live Demo][Slimbox 2]**

**30. [Picasa LightBox][]**

Picasa LightBox是WordPress插件，你可以轻松添加Picasa图片到你的WordPress文章和页面中。  
[![clip\_p\_w\_picpath030][clip_p_w_picpath030]][Picasa LightBox]

**[View Live Demo][View Live Demo 13]**

转载于:https://blog.51cto.com/zhipianren/549100

[Fancy Zoom _jQuery]: /images/20220113/dbc6545e271047a3b5068b7aaa0261a1.png
[clip_p_w_picpath001]: http://pic003.cnblogs.com/2011/34358/201103/20110318111032484.jpg
[View Live Demo]: http://static.railstips.org/orderedlist/demos/fancy-zoom-jquery/
[Lightbox2]: /images/20220113/bf84134c561d45d48cbe3fbf2a3b449d.png
[clip_p_w_picpath002]: http://pic003.cnblogs.com/2011/34358/201103/20110318111032624.jpg
[jQuery Lightbox Plugin _balupton edition]: http://balupton.com/projects/jquery-lightbox
[clip_p_w_picpath003]: http://pic003.cnblogs.com/2011/34358/201103/20110318111032732.jpg
[View Live Demo 1]: http://balupton.com/sandbox/jquery-lightbox/demo/
[LightWindow v2.0]: /images/20220113/6c8aaa8351594f5da0b75a7f5196ac86.png
[clip_p_w_picpath004]: http://pic003.cnblogs.com/2011/34358/201103/20110318111032840.jpg
[View Live Demo 2]: /images/20220113/6c8aaa8351594f5da0b75a7f5196ac86.png/#demos
[Colorbox Lightbox Plugin]: /images/20220113/c4eb8688a5a94b429d45d6cfd914a36b.png
[clip_p_w_picpath005]: http://pic003.cnblogs.com/2011/34358/201103/20110318111032143.jpg
[View Live Demo 3]: http://colorpowered.com/colorbox/core/example1/index.html
[FaceBox]: /images/20220113/febbd11f035c45e0acc96bc0c566e9c6.png
[clip_p_w_picpath006]: http://pic003.cnblogs.com/2011/34358/201103/2011031811103387.jpg
[jQuery Lightbox]: http://warren.mesozen.com/jquery-lightbox/
[clip_p_w_picpath007]: http://pic003.cnblogs.com/2011/34358/201103/20110318111033554.jpg
[View Live Demo 4]: http://cssglobe.com/lab/fading_text_links/
[Milkbox]: /images/20220113/f0d0cd8fd46e4feb929da9ee72878249.png
[clip_p_w_picpath008]: http://pic003.cnblogs.com/2011/34358/201103/20110318111033498.jpg
[FancyBox]: /images/20220113/d78142f139964f418805133fae0ebc42.png
[clip_p_w_picpath009]: http://pic003.cnblogs.com/2011/34358/201103/20110318111033443.jpg
[Visual jQuery LightBox]: http://jquerylightbox.com/jquery-lightbox.htm
[clip_p_w_picpath010]: http://pic003.cnblogs.com/2011/34358/201103/20110318111033105.jpg
[View Live Demo 5]: http://visuallightbox.com/lightbox-mac-style-demo.html
[prettyPhoto]: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
[clip_p_w_picpath011]: http://pic003.cnblogs.com/2011/34358/201103/20110318111033213.jpg
[PIROBOX]: http://www.pirolab.it/pirobox/
[clip_p_w_picpath012]: http://pic003.cnblogs.com/2011/34358/201103/20110318111033157.jpg
[Shadowbox]: /images/20220113/d8c9cf7e0dd24b809843926150b88a3f.png
[clip_p_w_picpath013]: http://pic003.cnblogs.com/2011/34358/201103/20110318111033101.jpg
[Litebox jQuery Plugin]: /images/20220113/5444125a8e2647468961abb43647e789.png
[clip_p_w_picpath014]: http://pic003.cnblogs.com/2011/34358/201103/20110318111033122.jpg
[View Live Demo 6]: http://www.doknowevil.net/litebox/
[ThickBox]: http://jquery.com/demo/thickbox/
[clip_p_w_picpath015]: http://pic003.cnblogs.com/2011/34358/201103/2011031811103466.jpg
[Slightly ThickerBox]: http://www.jasons-toolbox.com/SlightlyThickerbox
[clip_p_w_picpath016]: http://pic003.cnblogs.com/2011/34358/201103/20110318111034728.jpg
[Suckerfish HoverLightbox]: /images/20220113/fa2beef675e44c5e8691464f1ec169db.png
[clip_p_w_picpath017]: http://pic003.cnblogs.com/2011/34358/201103/2011031811103432.jpg
[View Live Demo 7]: http://www.mondaybynoon.com/examples/suckerfish_hoverlightbox/horizontal.html
[NyroModal]: /images/20220113/e61ffa22aa9944b7b1309192ea40b290.png
[clip_p_w_picpath018]: http://pic003.cnblogs.com/2011/34358/201103/20110318111034171.jpg
[Lightview]: http://www.nickstakenburg.com/projects/lightview/
[clip_p_w_picpath019]: http://pic003.cnblogs.com/2011/34358/201103/20110318111034833.jpg
[Interface Imagebox]: /images/20220113/e933a7f80e8e4f49bd994ddb7581f096.png
[clip_p_w_picpath020]: http://pic003.cnblogs.com/2011/34358/201103/20110318111034777.jpg
[jQuery lightBox plugin]: /images/20220113/45c02fb56d7b4f03bbf59218fbe023ea.png
[clip_p_w_picpath021]: http://pic003.cnblogs.com/2011/34358/201103/20110318111034885.jpg
[imgBox]: /images/20220113/bcc8a59bb51145c1ad16da791abc682e.png
[clip_p_w_picpath022]: http://pic003.cnblogs.com/2011/34358/201103/20110318111034189.jpg
[View Live Demo 8]: http://jqueryglobe.com/labs/imgbox/
[GreyBox jQuery Lightbox]: /images/20220113/cc30e476ff594d12a0cb44906063406c.png
[clip_p_w_picpath023]: http://pic003.cnblogs.com/2011/34358/201103/20110318111035297.jpg
[View Live Demo 9]: http://orangoo.com/labs/GreyBox/
[Picbox]: http://bunnyfire.co.uk/projects/picbox/
[clip_p_w_picpath024]: http://pic003.cnblogs.com/2011/34358/201103/20110318111035405.jpg
[Lightbox Gone Wild]: http://particletree.com/features/lightbox-gone-wild/
[clip_p_w_picpath025]: http://pic003.cnblogs.com/2011/34358/201103/20110318111035903.jpg
[View Live Demo 10]: http://particletree.com/examples/lightbox/
[SimpleModal]: http://www.ericmmartin.com/projects/simplemodal/#demo
[clip_p_w_picpath026]: http://pic003.cnblogs.com/2011/34358/201103/20110318111035760.jpg
[View Live Demo 11]: http://www.ericmmartin.com/projects/simplemodal-demos/
[boxy]: http://onehackoranother.com/projects/jquery/boxy/
[clip_p_w_picpath027]: http://pic003.cnblogs.com/2011/34358/201103/20110318111035704.jpg
[View Live Demo 12]: http://onehackoranother.com/projects/jquery/boxy/tests.html
[Highslide JS]: http://highslide.com/
[clip_p_w_picpath028]: http://pic003.cnblogs.com/2011/34358/201103/201103181110358.jpg
[Slimbox 2]: http://www.digitalia.be/software/slimbox2
[clip_p_w_picpath029]: http://pic003.cnblogs.com/2011/34358/201103/20110318111035952.jpg
[Picasa LightBox]: http://bogde.ro/computers/picasa-lightbox.htm
[clip_p_w_picpath030]: http://pic003.cnblogs.com/2011/34358/201103/2011031811103560.jpg
[View Live Demo 13]: http://bogde.ro/life/picasa-lightbox-gallery.htm