Drupal 7 - How to make an image open in a lightbox

Lightbox is a method of displaying an image or other web page content.  Usually, clicking the image will zoom the image to full screen, and dim the content of the page behind the image.

Here's an example:

Instructions

These are the steps for adding a lightbox image in the HTML editor, without having to view and edit HTML source.  These instructions assume you have already uploaded the image to your Drupal site.

1. In the HTML editor, click to insert the cursor in the middle of the link text.
2. Click the Image button in the HTML editor toolbar.
3. In the Image Properties dialog box, click Browse server.
4. Find and select the image you want to display in the page.  This may be the same image you selected before, or a smaller version of the same image, or a completely different image.
5. Click Insert file.
6. In the Image Properties dialog box, enter the height or width in pixels that the image should use in the page.  Drupal will automatically adjust the second dimension proportionally.
7. Add appropriate Alternative text for the image link.  Remember, because this image is going to be a link to a larger image, it must have alt text.
8. Click OK.
9. In the HTML editor, click once on the image to select it, then click the Link button  (not the Link to content button).
10. In the Link dialog box, click Browse server.
11. Find and select the image you want to open in the lightbox.
12. Click Insert file.
13. Back in the Link dialog box, click the Advanced tab.
14. In the Stylesheet classes field, type:  colorbox
15. In the Advisory Title field, type a brief title for the image.  This will be displayed in two places:
    • In the page, when the user hovers the mouse on the image
    • In the lightbox, at the bottom of the zoomed image
16. Click OK.
17. Save and publish the page.
18. Test your image link - it should open in a lightbox.