What Is a Lightbox Web Design?
If you've ever hovered your mouse cursor over an image on a website and seen a larger image pop up in a small hovering screen inside the browser, you've seen a jQuery driven lightbox. These types of Web designs are quite common, now that professional grade Web design tools, including Adobe Dreamweaver, make building them a matter of drag-and-drop design.
Other People Are Reading
-
Requirements
-
To make any kind of lightbox-based Web design, the page will need to load Javascript in the <HEAD> tags of the Web page. Your viewers will also need to have Javascript enabled in their Web browser. While being able to hand-code Javascript is useful, several hundred Web sites have plug and play lightbox scripts that you can drop into your Web page, or load into a professional grade Web design application, including Adobe Dreamweaver.
Basic Lightbox
-
Basic Lightbox uses Javascript and associated pairs of files, where the smaller one is labeled "thumb_imagename.jpg" and the other is labeled "imagename.jpg." The smaller image is placed in the design, and a Javascript behavior is called to display an overlay with the larger image inside of it. Additional features can include "previous" and "next" buttons in the frame around the box with the larger image for navigation through a picture gallery.
-
Advanced Lightboxes
-
A number of scripts take the lightbox concept, but extend it – these include floating windows holding YouTube videos, windows that provide popup forms for the user to enter data into and direct data from other websites. Lightboxes that, although they are pulled up by Javascript, can also run in Flash-driven websites.
Performance Issues
-
One thing to note about jQuery lightboxes and lightbox-driven Web design is that every Javascript run slows down page load speed, particularly with image loading lightboxes and large images; Javascript requires that every element in the Wweb page be loaded before the page displays. While modern broadband connections have made this less of a constraint than it was at the dawn of the Web on 56k modems, it's still something to keep in mind. When in doubt, use the smallest image sizes you can manage for the effect desired.
-
