Modal images

Sofia

A 'modal' image has a clickable popup option to display a larger version on top of the current page (it won't make much difference on a narrow mobile phone but it should on a bigger screen).

The HTML markup:

<div class="relative" style="max-width: 640px;">

<p class="enlarge">Click picture to enlarge</p>
<div><img src="img/sofia-1200.jpg" width="1200" height="628" alt="Sofia" class="modal-target"></div>

</div>

<p class="caption">Sofia</p>

<div id="modal" class="modal">
<div id="modal-close" class="modal-close">&times;</div>
<div><img src="#" alt="" id="modal-content" class="modal-content" style="width: 100%; max-width: 1200px;"></div>
<div id="modal-caption" class="modal-caption" style="width: 80%; max-width: 640px;"></div>
</div>

Edit the text in green as required for the particular image. This example is 1200 pixels wide but it could be 1800 pixels or 1024 pixels or whatever. Set the right height as well. Then paste in the markup without altering anything else – just put in the right green bits. <p class="caption"></p> optional.

The 'alt' text displays below the expanded image.

See information

Page last modified: 29 May, 2024
Search | Legal | Qwwwik

Info

Qwwwik