Search this site!

Return to the CSB Support home page
How do I create thumbnails and link them to the larger pictures?
Trellix users constantly ask about doing thumbnails and larger photos within Trellix.  The solution I propose is just one way of doing it!
How to use:

You have 5 pictures (jpg files), and you want to create a page containing a thumbnail of all 5 pictures. When a visitor clicks on one of the thumbnails, the larger, full size, picture is displayed.  

Your jpg files are named photo1.jpg, ..., photo5.jpg.

Part 1: Create pages for your photos

1. First click in your MAP area of Trellix and select to create a new sequence.

2. Add a new page to this sequence and insert the full size picture of 'photo1.jpg' (using the Add Image toolbar icon)

3. Right click on the square representing this new page, then click on Properties -> Page. In the 'Short Title' field, enter a one word name for this page, for example 'photo1', then click OK.

4. Repeat steps 2 & 3 for each additional jpg file you have. You will end up with a sequence of 5 pages, with each page containing a full size JPEG file.

Part 2: Create your thumbnail page

1. Go to the Trellix page where you wish to  place your thumbnail photos, and click Insert -> Table.  Set the number of rows to 5, and leave the number of columns to 2.  Change the initial column width to 150.

Note: we will place the thumbnails in one column, and a text description for each thumbnail in the adjoining column. Obviously, you can arrange the rows and columns as suits your web site.

2. Go to the first cell on the left and click to insert your first image (photo1.jpg).  Use your mouse and reduce (shrink) the photo until it is of an appropriate size (something in the 100x120 pixel range should be adequate).

3. Right click on this image, and click on 'Link to a page using...', then click on 'Selection'

4. A small chainlink symbol appears with your mouse cursor. Move your cursor to the MAP area to the square representing the page that has the full size photo and click on the square. You have just linked the thumbnail to this big picture!

5. Repeat steps 2-3-4 for each additional thumbnail.
This is a photo of an apple that I took
This is a bottle of medicine
This is a picture of a straw hat
Click on any of the thumbnails to see the bigger picture!

Download the code
right click on link, then click on 'Save target (or frame) as'
Other information:

Source code: