A Simple JavaScript for Popup Image Display on Click

Japanese

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 specify mamimageviewer.js.

Add class="mamImageViewer" to the parent div using 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>