Using Colorbox

Colorbox is a JQuery plug-in that will expand a thumbnail image to full size when clicked. We use the colorbox module to bridge between Drupal and the plug-in.

Here's how to add a colorbox image to a web page:

1. Create a new page via Content/Add, or edit an existing page.
2. In the WYSIWYG window (the one that looks like a Microsoft Word toolbar), click the toolbar's Add media icon ().
3. Click on the Choose File button and select a file from your local drive.
4. Click on the Submit button.
5. In the Format drop-down box, choose Preview.
6. Click on the Submit button.
7. Click (once) on the resulting image.
8. Click the toolbar's Link button ().
9. In the URL box, type: /files/image-name.jpg where image-name.jpg is the filename you just uploaded. Allowable image formats are JPG, PNG and GIF.
10. Click on the Advanced tab.
11. In the Advisory Title box, type: Click to Expand
12. In the Stylesheet Classes box, type: colorbox
13. Click the OK button.