Mar
28

[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, ExtPrototype, 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

My lightbox clone.

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

http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed
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

1 Comment

RSS Feed TrackBack URL

Feel free to leave your comment

Leave a comment

    top
    Powered by WordPress. Copyright © 2008 - 2010 Hien Nguyen. Theme design by Hagin