Professional and Affordable Web Design

0800 080 5401

10 useful light boxes

There are many light box scripts on the market today. It is not easy task to choose one.

Depending on our requirements there is no single best solution. There are projects which require simple light weight scripts, other need specific functionality and the size is not a priority.

Some scripts are Open Source projects, other are commercial products. There are many possibilities.

Lightweight light boxes.

1. Lighter-Box
This script is the winner in the low-weight category. Depending on the configuration, its size is about 7 kb total. (lightbox.js library is 4.4 kb)
If our goal is to minimise the code footprint of our image gallery, Lighter-Box script should be our choice.

2. HighSlide
This commercial script is very flexible. Depending on our needs and configuration it could be lightweight (8 kb) or sophisticated (up to 70 kb).
Configuration options, scalability, build of components. Supports inline content, Flash, Ajax content, iframes and more.

3. iBox
Lightweight (20 kb), fast, flexible. Support for JavaScript-disabled Browsers. Free of charge. Supports inline content, Youtube video, Ajax content.

4. Litebox
Lightweight (24 kb), fast, simple, pretty. Supports single images and image sets.

Medium size light boxes

5. Multibox
MooTools lightbox. It is about 56 kb. Supports Inline content, Ajax, Flash, MP3, video, iframe. Very Fast and good looking, versatile. MIT license.

6. Floatbox
Floatbox creates draggable and resizeable window. Size of this script is about 72 kb.

7. Fancyzoom
This lightbox could be used with many JavaScript frameworks like mootools, jQuery, prototype. Total weight is about 62 kb, but the gallery script is about 9 kb, so the rest is the framework. If we use jQuery or mootools on our website it will be only 9 kb more not 62 kb.

8. Fancybox
JQuery lightbox of 71 kb size. Adds a nice drop shadow, groups related items. Display images, in-linee elements, ajax and iframed content. CSS customizable, support transitions by using easing plugin.

9 Slimbox
Its not as slim as other scripts. Its size is about 51kb. (mootools 46 kb slimbox 5 kb). Interesting alternative for websites using mootools.

10 PrettyPhoto
PrettyPhoto is a jQuery light box script. It creates neat rounded boxes with image inside. Borders are transparent. It is CSS customizable. Script is about 70 kb and transparent border background images are about 10 kb. Total about 80 kb. Good for jQuery enthusiasts.

Comments0 Comments

All comments are moderated for spam and will not be shown. All genuine comments wil be show, however the links will be based on a NO FOLLOW RULE. Repeat commenters adding value to the articles and discusions will have removed alowing Follow Rule to Work.

Make a Comment

Notify me when someone responds

Quick Contact

See Full Portfolio Some Of Our Work

Screenshot of website

Driving Schools Booking Service (DSBS) is a network of driving instructors, covering the whole of the UK. For this project, we were...

Screenshot of website

County Security is a fully featured E - commerce solution, with an integrated "system configurator", which allows users to choose...

Customer News & Resources

At Mutiny Design we are constantly gathering together articles and help guides to assist our clients.

Introduction to sitemap.xml

Checking for a sitemap A site map (or sitemap) is a list of pages of a web site accessible to crawlers or users. It can be either a document in any form used as a planning tool for web design, or a web page that lists the pages on a web site, Some developers feel that site index is a more appropriately used term to relay page function, web visitors are used to seeing each term and generally associate both as one and the same. However, a site index is often an A-Z index that provides access to content, while a site map provides a general... Read More »

Center a web page in CSS

One simple way to center a web page using CSS is to create a container div, that is horizontally centered by having its left and right margins set to auto. Using this method, you can still apply colours / background images to the body tag, so its a flexible solution. (if you didnt need this ability, just apply margins and width to the body tag instead, and forget using the container div). The container div has the same width as your webpage and, well, contains it. All the code for your web page is placed inside the container div. This will... Read More »