You are here

Home

Colorbox

Submitted by Peter on Fri, 2011-11-11 20:40

The head of the King Parrot, Alisterus scapularis, showing the brilliant crimson feathers on the head.

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.

Download

You need two files for Colorbox, the Colorbox module for Drupal and the Colorbox Javascript file. Download both files, expand them, explore them, then upload them to your server.

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 the Colorbox Javascript library from jacklmoore.com/colorbox.

Download Colorbox to your local test directory. Expand the downloaded files and explore the contents.

Colorbox Javascript library

Unzip the Colorbox Javascript library. Look at the first directory as shown in the following screen shot. This is the directory you copy into your Drupal /sites/all/libraries/ directory. The directory contains some documentation and a subdirectory named colorbox.

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.

The Insert module settings is for image galleries and the Login links settings is for the login page.

The 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.

Examples

Hit one of the coloured areas to see a demonstration colorbox.

Default This is a demonstration of the default colorbox with only the inline parameter set to true.

transition=elastic This is a demonstration of a colorbox with the transition set to the default of elastic.

transition=fade This is a demonstration of a colorbox with the transition set to fade.

transition=none This is a demonstration of a colorbox with the transition set to none. Notice how gloriously fast this option is.

width=1000 This is a demonstration of the default with the width set to 1000 pixels to show you how you can override the width.

height=1000 This is a demonstration of the default with the height set to 1000 pixels.

height=90%,width=95% This is a demonstration of the default with the height and the width set to percentages. Transition is also set to none to save you time.

height=533,width=630 This is a demonstration of the default colorbox with the height and width set to the size of the image.

height=563,width=660 This is a demonstration of the default colorbox with the height and width set to the size of the image plus a margin of 30 pixels to allow for scroll bars.

transition=elastic, speed=3000 This is a demonstration of a colorbox with the transition speed set to 3000 milliseconds (3 seconds).

transition=none, speed=3000 This is a demonstration of the default colorbox with transition set to none and speed increased from the default 350 to 3000 so you can see the effect of transition and speed.

transition=elastic, speed=3 This is a demonstration of a colorbox with the transition speed set to 3 milliseconds (0.003 seconds).

opacity=0.3 This is a demonstration of a colorbox with the opacity reduced from the default 0.85 down to 0.3. The background is more transparent and easier to see.

opacity=0.9 This is a demonstration of a colorbox with the opacity increased to 0.9.

speed=100, opacity=0.45 This is a demonstration of a colorbox with a popular combination of settings.