分享30个最佳 jQuery Lightbox 效果插件

布满荆棘的人生 2022-09-19 05:23 17阅读 0赞

Lightbox 应该是最流行的图片浏览效果了，常具有功能包括：自动根据窗口的大小缩放图片，模式窗口，幻灯片方式播放，内容预加载，渐变等效果。Web开发者们模仿 Lightbox 开发了各种各样的图片浏览插件，有基于 jQuery 的，有基于 Prototype 的，也有使用原生 JavaScript 写的。今天，本文要与大家分享的是30个最佳 jQuery Lightbox 效果插件。

### 1.[jQuery LightBox][] ###

[![2012082813584033.jpg][]][jQuery LightBox]

[在线示例][jQuery LightBox]

### 2.[Lightbox2][] ###

[![2012082814010482.jpg][]][Lightbox2]

[在线示例][Lightbox2]

### 3.[FancyBox][] ###

![2012082814050936.jpg][]

[在线示例][FancyBox]

### 4.[LightWindow v2.0][] ###

[![2012082814072619.jpg][]][LightWindow v2.0]

[在线示例][Link 1]

### 5.[Colorbox Lightbox Plugin][] ###

[![2012082814082963.jpg][]][2012082814082963.jpg 1]

[在线示例][Link 2]

### 6.[FaceBox][] ###

[![jQuery 灯箱插件][jQuery]][FaceBox]

[在线示例][FaceBox]

### 7.[jQuery Lightbox][] ###

[![jQuery 灯箱插件][jQuery 1]][jQuery _jQuery 1]

[在线示例][jQuery _jQuery 1]

### 8.[Milkbox][] ###

[![jQuery 灯箱插件][jQuery 2]][Milkbox]

[在线示例][Milkbox]

### 9.[jQuery Lightbox Plugin (balupton edition)][jQuery Lightbox Plugin _balupton edition] ###

[![jQuery 灯箱插件][jQuery 3]][Milkbox]

[在线示例][Link 3]

### 10.[Visual jQuery LightBox][] ###

[![jQuery 灯箱插件][jQuery 4]][jQuery _jQuery 4]

[在线示例][jQuery _jQuery 4]

### 11.[prettyPhoto][] ###

[![jQuery 灯箱插件][jQuery 5]][prettyPhoto]

[在线示例][prettyPhoto]

### 12.[PIROBO][][X][PIROBO] ###

### [![jQuery 灯箱插件][jQuery 6]][PIROBO] ###

[在线示例][PIROBO]

### 13.[Shadowbox][] ###

[![jQuery 灯箱插件][jQuery 7]][Shadowbox]

[在线示例][Shadowbox]

### 14.[Litebox jQuery Plugin][] ###

[![jQuery 灯箱插件][jQuery 8]][jQuery _jQuery 8]

[在线示例][jQuery _jQuery 8]

### 15.[ThickBox][] ###

[![jQuery 灯箱插件][jQuery 9]][ThickBox]

[在线示例][ThickBox]

### 16.[Slightly ThickerBox][] ###

[![jQuery 灯箱插件][jQuery 10]][Slightly ThickerBox]

[在线示例][Slightly ThickerBox]

### 17.[Suckerfish HoverLightbox][] ###

[![jQuery 灯箱插件][jQuery 11]][jQuery _jQuery 11]

[在线示例][jQuery _jQuery 11]

### 18.[NyroModal][] ###

[![jQuery 灯箱插件][jQuery 12]][NyroModal]

[在线示例][NyroModal]

### 19.[Lightview][] ###

[![jQuery 灯箱插件][jQuery 13]][Lightview]

[在线示例][Lightview]

### 20.[Interface Imagebox][] ###

[![jQuery 灯箱插件][jQuery 14]][Interface Imagebox]

[在线示例][Interface Imagebox]

### 21.[Fancy Zoom][] ###

[![jQuery 灯箱插件][jQuery 11]][jQuery _jQuery 11 1]

[在线示例][jQuery _jQuery 11 1]

### 22.[imgBox][] ###

[![jQuery 灯箱插件][jQuery 15]][jQuery _jQuery 15]

[在线示例][jQuery _jQuery 15]

### 23.[GreyBox jQuery Lightbox][] ###

[![jQuery 灯箱插件][jQuery 16]][jQuery _jQuery 16]

[在线示例][jQuery _jQuery 16]

### 24.[Picbox][] ###

[![jQuery 灯箱插件][jQuery 17]][Picbox]

[在线示例][Picbox]

### 25.[Lightbox Gone Wild][] ###

[![jQuery 灯箱插件][jQuery 18]][jQuery _jQuery 18]

[在线示例][jQuery _jQuery 18]

### 26.[SimpleModal][] ###

[![jQuery 灯箱插件][jQuery 19]][jQuery _jQuery 19]

[在线示例][jQuery _jQuery 19]

### 27.[boxy][] ###

[![jQuery 灯箱插件][jQuery 20]][jQuery _jQuery 20]

[在线示例][jQuery _jQuery 20]

### 28.[Highslide JS][] ###

[![jQuery 灯箱插件][jQuery 21]][Highslide JS]

[在线示例][Highslide JS]

### 29.[Slimbox 2][] ###

[![jQuery 灯箱插件][jQuery 22]][Slimbox 2]

[在线示例][Slimbox 2]

### 30.[Picasa LightBox][] ###

[![jQuery 灯箱插件][jQuery 23]][jQuery _jQuery 23]

[在线示例][jQuery _jQuery 23]

[jQuery LightBox]: http://leandrovieira.com/projects/jquery/lightbox/
[2012082813584033.jpg]: /images/20220828/571465d0c54c4b5ebdd9a697ad364589.png
[Lightbox2]: http://www.huddletogether.com/projects/lightbox2/
[2012082814010482.jpg]: /images/20220828/50bfd67a413a4739bec1b36d9ababcca.png
[FancyBox]: http://fancybox.net/
[2012082814050936.jpg]: /images/20220828/cf6f2a41e6d7471288cde523b5cb0139.png
[LightWindow v2.0]: http://www.p51labs.com/lightwindow
[2012082814072619.jpg]: /images/20220828/68b58d434bb840819867c1f9aa5d9b3e.png
[Link 1]: http://www.p51labs.com/lightwindow/#demos
[Colorbox Lightbox Plugin]: http://designresourcebox.com/snippet/colorbox-lightbox-plugin/
[2012082814082963.jpg]: /images/20220828/bb7469c6bf5240ee9531001c477ba361.png
[2012082814082963.jpg 1]: http://www.jacklmoore.com/colorbox
[Link 2]: http://colorpowered.com/colorbox/core/example1/index.html
[FaceBox]: /images/20220828/b1f6996b15194f42b324736d01b0fbaf.png
[jQuery]: http://pic002.cnblogs.com/images/2012/36987/2012120617212449.jpg
[jQuery Lightbox]: http://warren.mesozen.com/jquery-lightbox/
[jQuery 1]: http://pic002.cnblogs.com/images/2012/36987/2012120617214087.jpg
[jQuery _jQuery 1]: http://cssglobe.com/lab/fading_text_links/
[Milkbox]: /images/20220828/77004022642c4ab995657adbfcfc73e3.png
[jQuery 2]: http://pic002.cnblogs.com/images/2012/36987/2012120617212481.jpg
[jQuery Lightbox Plugin _balupton edition]: http://balupton.com/projects/jquery-lightbox
[jQuery 3]: http://pic002.cnblogs.com/images/2012/36987/2012120617212446.jpg
[Link 3]: http://balupton.com/sandbox/jquery-lightbox/demo/
[Visual jQuery LightBox]: http://jquerylightbox.com/jquery-lightbox.htm
[jQuery 4]: http://pic002.cnblogs.com/images/2012/36987/2012120617214073.jpg
[jQuery _jQuery 4]: /images/20220828/2eef15bd9dd7433dba3aa8b3f1c39163.png
[prettyPhoto]: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
[jQuery 5]: http://pic002.cnblogs.com/images/2012/36987/2012120617212463.jpg
[PIROBO]: http://www.pirolab.it/pirobox/
[jQuery 6]: http://pic002.cnblogs.com/images/2012/36987/2012120617212592.jpg
[Shadowbox]: http://www.shadowbox-js.com/index.html
[jQuery 7]: http://pic002.cnblogs.com/images/2012/36987/2012120617242574.jpg
[Litebox jQuery Plugin]: http://designresourcebox.com/snippet/litebox-jquery-plugin/
[jQuery 8]: http://pic002.cnblogs.com/images/2012/36987/2012120617282763.jpg
[jQuery _jQuery 8]: http://www.doknowevil.net/litebox/
[ThickBox]: http://jquery.com/demo/thickbox/
[jQuery 9]: http://pic002.cnblogs.com/images/2012/36987/2012120617243681.jpg
[Slightly ThickerBox]: http://www.jasons-toolbox.com/SlightlyThickerbox
[jQuery 10]: http://pic002.cnblogs.com/images/2012/36987/2012120617243695.jpg
[Suckerfish HoverLightbox]: http://mondaybynoon.com/2006/03/27/suckerfish-hoverlightbox/
[jQuery 11]: http://pic002.cnblogs.com/images/2012/36987/2012120617242593.jpg
[jQuery _jQuery 11]: /images/20220828/6482057210fc4972a9052dd0dd50203c.png
[NyroModal]: /images/20220828/750a23995a684181909e8fa389e2dd23.png
[jQuery 12]: http://pic002.cnblogs.com/images/2012/36987/2012120617242562.jpg
[Lightview]: http://www.nickstakenburg.com/projects/lightview/
[jQuery 13]: http://pic002.cnblogs.com/images/2012/36987/2012120617242598.jpg
[Interface Imagebox]: /images/20220828/87569e89c292431382076a5ee29b4a95.png
[jQuery 14]: http://pic002.cnblogs.com/images/2012/36987/2012120617242584.jpg
[Fancy Zoom]: http://orderedlist.com/blog/articles/fancyzoom-meet-jquery/
[jQuery _jQuery 11 1]: http://static.railstips.org/orderedlist/demos/fancy-zoom-jquery/
[imgBox]: http://jqueryglobe.com/article/imgbox
[jQuery 15]: http://pic002.cnblogs.com/images/2012/36987/2012120617282790.jpg
[jQuery _jQuery 15]: /images/20220828/09e1eed31c85476c872329094377e1f3.png
[GreyBox jQuery Lightbox]: http://designresourcebox.com/snippet/greybox-jquery-lightbox/
[jQuery 16]: http://pic002.cnblogs.com/images/2012/36987/2012120617282736.jpg
[jQuery _jQuery 16]: http://orangoo.com/labs/GreyBox/
[Picbox]: http://bunnyfire.co.uk/projects/picbox/
[jQuery 17]: http://pic002.cnblogs.com/images/2012/36987/2012120617282778.jpg
[Lightbox Gone Wild]: http://particletree.com/features/lightbox-gone-wild/
[jQuery 18]: http://pic002.cnblogs.com/images/2012/36987/2012120617282770.jpg
[jQuery _jQuery 18]: /images/20220828/0156810e7c464c2e9ceb9a541248b071.png
[SimpleModal]: http://www.ericmmartin.com/projects/simplemodal/#demo
[jQuery 19]: http://pic002.cnblogs.com/images/2012/36987/2012120617282730.jpg
[jQuery _jQuery 19]: /images/20220828/f406caae84d4469b88b85d0ee825a974.png
[boxy]: http://onehackoranother.com/projects/jquery/boxy/
[jQuery 20]: http://pic002.cnblogs.com/images/2012/36987/2012120617282741.jpg
[jQuery _jQuery 20]: http://onehackoranother.com/projects/jquery/boxy/tests.html
[Highslide JS]: /images/20220828/4a0a081057f145689df4520a59b88a98.png
[jQuery 21]: http://pic002.cnblogs.com/images/2012/36987/2012120617282795.jpg
[Slimbox 2]: http://www.digitalia.be/software/slimbox2
[jQuery 22]: http://pic002.cnblogs.com/images/2012/36987/2012120617282715.jpg
[Picasa LightBox]: http://bogde.ro/computers/picasa-lightbox.htm
[jQuery 23]: http://pic002.cnblogs.com/images/2012/36987/2012120617282777.jpg
[jQuery _jQuery 23]: /images/20220828/37231b672ab34f1bb6baaf241e3d7d19.png