Modal images (zoom / enlarge)
A modal is a dialog box/popup window that is displayed on top of the current page. So a 'modal image' is when the popup contains a larger version of the same original image.
The markup
Edit the text where red as required, according to the image filename, the dimensions of the original image, and the dimensions required for the popup. Everything else must be exactly as below:
<div class="relative" style="max-width: 740px;"> <p class="enlarge">Click picture to enlarge</p> <p class="w"><img src="img/filename.jpg" width="740px" height="auto" alt="alt text" class="modal-target"></p> </div> <div id="modal" class="modal"> <div id="modal-close" class="modal-close">×</i></div> <div><img src="#" alt="" id="modal-content" class="modal-content" style="width: 100%; max-width: 860px;"></div> <div id="modal-caption" class="modal-caption" style="width: 80%; max-width: 640px;"></div> </div>
Adjust the width of the caption to suit.
In the above example the original 'native' image is 860 pixels wide but is initially given a markup width of 680 pixels. The modal enlarged version is therefore the better quality of the two. Alternatively you can make the original 680 pixels wide; it just means the enlarged 860px version will lose a bit of quality (as the example below).
Example modal image:
Click picture to enlarge
Girl making coffee
For larger screens only (desktops, laptops, large tablets). Deactivated on mobiles etc because the images already fill most of the screen.
