Click to Enlarge Dummy Page

How to do a "click to enlarge...":

Set up a new simple image gallery on this page, containing just one image or multiple pics if you want the user to be able to scroll through the enlarged images

Hover over the image gallery thumbnail and look at the filename at the end of the path. Note this filename, to plug into "IMAGE-FILENAME.xxx" in the code below

Take a note of the widget ID of the image gallery, to plug into "999999" in the code below

Call up your intended web page and enter source view. 

For a float-left style image, width medium (360px), paste the following:

<div style="float: left; max-width: 376px; font-weight: normal; font-size: 0.89em">
    <a class="fancybox" data-fancybox-group="gallery-post-999999-field-83" href="https://www.bioch.ox.ac.uk/sites/default/files/bioch/images/media/IMAGE-FILENAME.xxx" style="text-decoration: none; font-weight: normal; font-size: 0.89em" title="Caption: YOUR-CAPTION-HERE"><img src="https://www.bioch.ox.ac.uk/sites/default/files/styles/mt_image_medium/public/bioch/images/media/IMAGE-FILENAME.xxx" /></a>
<p style="padding-right: 5px; margin-right: 5px; margin-bottom: 15px;">Caption: YOUR-CAPTION-HERE <em>(Click image to enlarge)</em></p>
</div>

For a centred image, size large (800px), paste the following:

<div style="font-weight: normal; font-size: 0.89em; text-align: center">
    <a class="fancybox" data-fancybox-group="gallery-post-999999-field-83" href="https://www.bioch.ox.ac.uk/sites/default/files/bioch/images/media/IMAGE-FILENAME.xxx" style="text-decoration: none; font-weight: normal; font-size: 0.89em" title="Caption: YOUR-CAPTION-HERE"><img src="https://www.bioch.ox.ac.uk/sites/default/files/styles/mt_image_large/public/bioch/images/media/IMAGE-FILENAME.xxx" /></a>

    <p style="margin-bottom: 15px;">Caption: YOUR-CAPTION-HERE <em>(Click image to enlarge)</em></p>
</div>