Some people like lightboxes. Some people hate them. They are overused and abused. Drupal 7 is shipped with jQuery and jQuery UI build in. Colorbox is written in jQuery and is a natural fit for Drupal 7. Select the King Parrot to see Colorbox in action.
I hate lightboxes. Most uses of lightboxes abuse our time. There is a slow animation and an even worse wait while the lightbox is dragged off the screen. If you do use a lightbox, make it quick. Animation is only for script kiddies working on their first page. Everybody else is extremely tired of waiting to see images. Expand the image out in 0.2 seconds or less. Shut the lightbox back down instantly with no animation.
Then there are the lightboxes that expand an image out a little bit but waste a massive screen space on a grey semi transparent border. There is a rude term for people who inflict that on you. If you are going to open a lightbox, the content better be bigger, a lot bigger, than the version on the original page. The border should be absolutely minimal. Do not waste pace with a big button saying
Close me. Just close the lightbox on escape and a very small border/button mix (with the button in the border).
Do not hog my screen. If your image does not fill my screen, why is your lightbox filling my screen? Leave the rest of my screen free for my use. Think about modern screens. They are short and wide, the classic landscape format dragged out to extreme. You open a vertical portrait format image in the middle of the screen, you adjust the size to fit the height, and waste most of the screen on black borders. Please. I have other things to do besides looking at your picture of your pet poodle eating pizza. The other two acres of screen could be used to look up Fibonacci numbers or to order mangoes from FNQ.
Lightboxes, used intelligently, can help us access large items of content and focus on detailed content. jQuery is the easiest way to control your Web page in the browser. Colorbox, based on jQuery, is a really easy way to create a lightbox in your web site. Drupal makes everything easy be prepacking jQuery. The Drupal Colorbox module connects the colorbox library to Drupal. Everything fits. All you have to do is control the urge to splash inappropriate lightboxes all over my screen.
I use a directory structure the same as my servers so I can run the code locally as a test Web site. I load the code into the same directory as on the server. I can synchronise the files between the local directory and the server. The same files work in my local copy of the Apache web server as a test Web site.
Download the Drupal Colorbox module from drupal.org/project/colorbox.
Download Colorbox to your local test directory. Expand the downloaded files and explore the contents.
/sites/all/libraries/ directory. The directory contains some documentation and a subdirectory named
The following screen shot shows the contents of the
colorbox subdirectory. you would think this is the only directory directory you upload into /sites/all/libraries/ but the Colorbox module expects everything even if it is never used.
The Drupal module
Upload the expanded Drupal Colorbox module directory to
/sites/all/modules/. Switch the module on in Administration > Modules. Visit the configuration page. You can start using Colorbox with the defaults.
Insert module settings is for image galleries and the
Login links settings is for the login page.
Extra settings has the option for inline colorboxes and shows the format of links for manual activation.
Look in the
Advanced settings section. There is an area for listing pages that should not be colorboxed.