Display photos (images) with JavaScript and show them in an enlarged popup on click — mamImageViewer.js
■ How to Use
-
Click the button above to download
mamimageviewer.js.
-
In the file where you want to use
mamImageViewer, include the script like this:
<script src="./js/mamimageviewer.js"></script>Use either a relative or absolute path to specifymamimageviewer.js.
-
Add
class="mamImageViewer"to the parentdivusing the structure below:
<div class="mamImageViewer"> <div> <img src="./imgs/car1.jpg" alt="Yellow car" title="Yellow sports car"> </div> <div> <img src="./imgs/car2.jpg" alt="Red car" title="Red RV"> </div> <div> <img src="./imgs/car3.jpg" alt="Silver car" title="Silver sedan"> </div> </div>
■ Example 1
Please click the images
■ Example 2
Please click the images
<div class="mamImageViewer">
<div>
<img src="./imgs/c001.jpg" alt="Room 1" title="Additional info 1">
</div>
<div>
<img src="./imgs/c002.jpg" alt="Room 2" title="">
</div>
<div>
<img src="./imgs/c003.jpg" alt="Room 3" title="Additional info">
</div>
<div>
<img src="./imgs/c004.jpg" alt="Room 4" title="">
</div>
<div>
<img src="./imgs/c005.jpg" alt="Room 5" title="Additional info 5">
</div>
<div>
<img src="./imgs/c006.jpg" alt="Room 6" title="">
</div>
<div>
<img src="./imgs/c007.jpg" alt="Room 7" title="Additional description here">
</div>
</div>
