The Colorbox module allows content to display in a "lightbox" or "modal window". This can be used for showing a larger version of an image, or linking in external content via iframes.

This functionality requires a Site Administrator to enable some features.


View larger version image

How to use

Simply add the class 'colorbox' to a link and the content it links to will display in a lightbox.

If you are linking to an external page or form then you will want to use some additional controls.

Module documentation

Putting a lightbox link on an image

Consider page download sizes:

  • If the thumbnail shown in the page and the larger, lightboxed image will be fairly close in size, you can use the same image for each.
  • If you want to include multiple lightboxed images on a page, or a very large image as the lightboxed image, upload a small version to display in the page and a large version to display in the lightbox.


  1. Using the image button, insert the small version of the image into the page. 
    • If you're using a small and large version of the image, upload both images at this step.
    • You will need to copy the relative URL of the image you want to display in the lightbox, e.g. /files/3856/best-practice-image.jpg
  2. After the small image is in the page, select it and use the link button to add a link to the large version of the image.
    • Use the URL you just copied.
    • Use the Link type: URL and protocol: <other>
      Insert link - first tab
      Insert link: first tab
    • Click on the Advanced tab and add the class 'colorbox' in the Stylesheet classes field.
      Insert link: Advanced tab
  3. Save the changes and test the link.