Adding an image to a lightbox allows you to either:

• Create a clickable image that enlarges to full-screen when clicked (example below)
• Create a clickable icon that reveals a full-screen image when clicked

Adding an image to a lightbox

1. In Sitecore's Content Editor, navigate to the page you want to display the lightbox on. Click Show Editor above the Body field.

2. Place the cursor where you would like to display the clickable image or icon and follow the directions to insert an image.

   Remember: This is the image that will display on the page as a clickable link, not the large image that displays in the lightbox.

3. Click HTML in the bottom-left of the content editor window. You will see the image's code:

   <img alt="My alt tag." src="/~/media/Images/irt/computers/recycle-sm.ashx" />
   

4. Surround the entire image code block with <a class="ilightbox-photo" href="" data-type="image"> and </a>. The code should now look like this:

<a class="ilightbox-photo" href="" data-type="image">
<img alt="My alt tag." src="/~/media/Images/irt/computers/recycle-small.ashx" />
</a>




5. Locate the lightbox image's URL in the media library and paste it into the blank href="" tag. This is the full-sized image that will display after the user clicks the smaller image on the page. The code should now look like this:

<a class="ilightbox-photo" href="/~/media/Images/irt/computers/recycle-large.ashx" data-type="image">
<img alt="My alt tag." src="/~/media/Images/irt/computers/recycle-small.ashx" />
</a>
    

6. Accept the changes in the Edit HTML window. Save and display or publish the page.