Zoom-image

This element is used to insert an image that enlarges to fill a page when clicked.

Zoom-image (1)

(Animated GIF - Click image to enlarge)

Place the cursor where you want the code to appear in the content field and select the element from the right-hand list. The Image Browser will appear.

Select the image you want to insert, then click Done. The code will be placed in the content field.

Zoom-image code appears like this:

{zoomimage filename.jpg} 

Default instance of this code.


This element can also be used to insert an image that displays a second image within itself when the mouse hovers over it.

Zoom-image (2)

(Animated GIF - Click image to enlarge)

This is achieved by selecting two images in the Image Browser instead of one. When the code is placed in the content field, it will appear like this:

{zoomimage filename1.jpg|filename2.jpg} 

First segment is for the primary (small) image, second segment is for the secondary (large) image.

Since this functionality displays two separate images instead of actually zooming a single image, you will need to have two versions of the same image in your course (one small, one large) for use in this element.

NOTES:
  • If using the hover zoom-image, images will be arranged in filename alphabetical order by default, regardless of the order they were selected. You will have to edit the code manually if you want to arrange them differently.
  • Currently, clickable zoom-images are limited to 240px width, but not limited in height. Therefore image distortion and stretching may occur for wider images. Hover zoom-images are not restricted in height or width and will not distort (though a larger second image is always preferred).