Modal images

Sofia

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. Caption optional.

See information

Page last modified: 16 April, 2024
Search | Legal | Qwwwik

Info

Qwwwik