How to add zoomable thumbnails (lightboxes) to your website:

WebGears allows you to publish images on your website using a lightbox effect. This effect creates a miniature image that, when clicked, shows a pop-up modal window with a full-size image. In order to display an image on your website successfully, you need to prepare it (optimise it) for online viewing. You can do that by using compatible image-editing software.

Step 1. Image optimisation

Photos from your camera are high quality, but they are also massive in file size (megabytes) and visual dimensions (centimeters/pixels). The goal is to scale and crop your images in such a way as to reduce the size of the images while preserving the quality of the original. Try to keep the size of your images smaller than 300K. You can do so by scaling the height or width (whichever is bigger) to 800 pixels (px). When exporting or saving your optimised images, select JPG/JPEG format and adjust the quality to achieve the desired size, quality, and compression.

Step 2. Opening the section for editing

Once you have your image prepared/optimised for online viewing, log in to WebGears and proceed to the section in which you want to place your image.

Click on the gear icon to enter editing mode for that section. The pop-up window with all editing controls will appear.

Step 3. Uploading and placing the image

Use the form at the bottom of the editing window to upload your image.

Once you select your image, you will see an upload progress indicator, as shown below.

Wait until the link for your image appears. Click somewhere within the content, placing the cursor where you want the miniature to be placed.

Next, click on the button, 'Place as thumb'.

This will place a miniature of your image within the content, at the place where you put the cursor. This miniature already contains a link to the full-size image.

Step 4. Adding a caption to the full-size (zoomed) image

You can add a caption to your image. The caption will be displayed below the full-size, pop-up version. To add a caption, simply click on (select) the image and then click the 'link edit' icon from the toolbar. This will display a pop-up dialog box. You can specify the title of your image, which will be displayed as a caption when the image is zoomed.

Now you can click on the image and adjust its properties. You can align the image, just as you align text, to the left side, right side, or center. Aligning the image to the left or right will wrap text nicely around the image. You can also use more advanced image-editing options, the details of which you can explore in the other support tutorials.

Step 5. Saving the content

Once you are finished editing the image and are satisfied with its placement, click on the save icon to publish the section, or repeat the process by uploading another image (Step 3).

This is how an example finished lightbox looks when showing the zoomed, full-size image:

Step 7. Logging out

You should log out of WebGears after you’re through. To do so, click on the 'Log Out' option from the option bar at the top of the page.