The following is a guide to adding lightbox functionality to images in your content body area, this guide does require some basic knowledge of HTML and may not be necessary depending on what version of the Drupal content management system you are using.

This guide assumes you're logged into your website. The first step is to upload the larger versions of the image you wish to show in the lightbox, this may not be necessary if the large image is already on the website or you are using text to link to your lightbox.

Uploading the larger images you want to display in the lightbox

1. In the body click the image properties icon
2. Click the "Browse Server" button
3. Select the appropriate folder e.g. images or pics
4. Click the "Upload" button and browse and select the image from your computer
5. Insert the image into the "Image properties" window
6. Copy the path of the image from the path field
7. Click the cancel button so the image is not added to your body content

Add the content that you wish to link to the lightbox

1. This may be adding a thumbnail if so upload the thumbnail and add it to your body content - follow steps 1-5 then:
   1. Add content to the alternative text field
   2. Click ok
   3. Position your image in the body
2. Select the text or image and click the link button in the tool bar
3. Paste in path to the large image in the URL field
4. In the link window change the tab over to "Advanced"
5. Enter a description of the image into the "Advisory Title" field
6. Click ok

Editing the code of your body to allow the lightbox to work

In order to turn the link you have just created into a link that will show up in lightbox do the following:

1. In the tool bar click the "Source button
2. This will show you the HTML code of your story
3. Find the HTML for your link you have just created

4. add the "rel" attribute to the link as follows:

   <a href="/sites/www.klixo.co.nz/files/images/example-large.jpg" rel="lightbox[gallery]" title="Example description">
         <img alt="example alternate text" src="/sites/www.klixo.co.nz/files/images/example-small.jpg"  title="Example image title" />
   </a>

5. Save your page or story and test