[JS] Lightbox effect collection
Hiệu ứng Lightbox là khi bạn xem trên trang web, click vào một tấm ảnh hoặc thành phần nào đó, một hiệu ứng làm xuất hiện vùng thông tin mới ngay trên trang web của bạn đang xem với một lớp nền che đi vùng trang web bên dưới.

Có nhiều script giúp bạn thực hiện điều đó, và các công cụ đó ngày càng mạnh hơn. Bên dưới là list các script mình biết, một số đã dùng thử
1. LightBox
An inline image popup, overlays and fades out the current page.
http://www.phatfusion.net/lightbox
Framework: mootools v1.11
Support: image
2. LightBox 2
Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.
http://www.huddletogether.com/projects/lightbox2
Framework: Prototype, Scriptaculous Effects Library
Support: image, image set
3. LightBox
jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector.
http://leandrovieira.com/projects/jquery/lightbox/
Framework: jQuery
Support: image, image set
4. LightWindow
http://www.stickmanlabs.com/lightwindow/
Framework: Prototype
Support: Quicktime, Apple, Youtube, Flash, Image, Frame, From, HTML page, Inline content
5. ModalBox
ModalBox is a JavaScript technique for creating modern (Web 2.0-style) modal dialogs or even wizards (sequences of dialogs) without using conventional popups and page reloads. It’s inspired by Mac OS X modal dialogs. And yes, it may also be useful for showing larger versions of images.
http://www.wildbit.com/labs/modalbox
Framework: Prototype, Scriptaculous Effects Library
Support: HTML link, HTML with form, HTML javascript object
6. MultiBox
lightbox that supports images, flash, video, mp3s, html.
http://www.phatfusion.net/multibox
Framework: mootools
Support: flv, mov, wmv, real, mp3, HTML, HTML page, HTML ajax, HTML link
7. ShadowBox
Shadowbox is an online media viewer application that supports all of the web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page.
http://mjijackson.com/shadowbox
Framework: YUI Library, Ext, Prototype, jQuery, mootools, Dojo
Support: image, large image, gallery image, image map, inline HTML, HTML link, google map, form, iframe, swf, mov, wmv, mp4, Youtube, Google video, apple trailer, flv, qt, wmp, script
8. ImageBox
http://www.intelliance.fr/jquery/imagebox/
Framework: jQuery
Support: image, image set
9. SlimBox
Slimbox 2 is a 4 KB visual clone of the popular Lightbox 2 script by Lokesh Dhakar, written using the jQuery javascript library. It was designed to be very small, efficient, standards-friendly, fully customizable, more convenient and 100% compatible with the original Lightbox 2.
http://www.digitalia.be/software/slimbox2
Framework: jQuery
Support: image, image set
10. GreyBox
http://jquery.com/demo/grey
Framework: jQuery
Support: HTML page, HTML ajax, HTML link
11. ThickBox
ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.
http://jquery.com/demo/thickbox
Framework: jQuery
Support: Image, gallery images, inline content, iframe content, ajax content
12. FancyBox
FancyBox is tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.
http://fancy.klade.lv/
Framework: jQuery
Support: image, image set, inline, iframe, AJAX
13. FaceBox
Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. It’s simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.
http://famspam.com/facebox
Framework: jQuery
Support: image, inline HTML, AJAX
14. PiroBox
http://www.pirolab.it/pirobox/
Framework: jQuery
Support: image, image set (easing effect)
15. CaoBox
http://hagin.info/blog/2009/01/caoboxjs
Framework: jQuery
Support: inline HTML
16. Fancy Zoom
This works with any html (images, text, headings, flash). The only caveat is it doesn’t currently work with AJAX. Whatever you want to zoom to must be html already on the page.
http://orderedlist.com/demos/fancy-zoom-jquery/
Framework: jQuery
Support: image, image set, text
17. PrettyPhoto
http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/
Framework: jQuery
Support: image, image set
18. nyroModal
http://nyromodal.nyrodev.com/
Framework: jQuery
Support: image, image set, inline HTML, AJAX, Youtube, iframe, form, blocker modal
19. LightBox with CSS
20. Lightview
http://www.nickstakenburg.com/projects/lightview/
Framework: Prototype, Scriptaculous Effects Library
Support: image, image set, Quicktime, AJAX form, Anti-aliasing, flash , iframe, inline HTML
21. Hightslide
http://highslide.com/
Framework:
Support: image, image set, form, flash , iframe, inline HTML
Hi! My full name is Nguyen Hoang Hien, and Hagin is my nickname.
Hello all,
How do you allow images and Youtube videos in comments?
While I surf blog , i found a all new trick in http://pic-memory.blogspot.com/
Vistor can comment and EMBED VIDEO YOUTUBE , IMAGE. Showed Immediately!
EX : View Source.
http://pic-memory.blogspot.com/2009/02/photos-women-latin-asian-pictu...
(add photos and videos to Blogspot comments).
Written it very smart!
I wonder how they do it ? Anyone know about this , please tell me
(sr for my bad english ^_^)
email: ya76oo@ya76oo.com
thanks.