Modal Popup zoom add on Images grid

[jamliaqat]

I add new section with images grid. Now I want to add

Image Modal Popup on every images

so I add custom section and link Image Modal Popup, but it works on one image, not all. I try my best but not work.

Here is section code

# {{section.settings.custom_colalge_title}}

  {% for blocks in section.blocks %}
  

    
    

    
  
 
  {% endfor %}

{% schema %}
  {
    "name": "Custom Collage",
    "settings": [
      {
        "type": "text",
        "id": "custom_collage_title",
        "label": "custom collage title"
      }
    ],
    "max_blocks": 28,
    "blocks": [
      {
       "name": "collage image",
        "type": "collage_image",
        "settings": [
          {
            "type": "text",
            "id": "title",
            "label": "collage title"
          },
          {
          "type": "image_picker",
          "id": "collage_image",
          "label": "collage image"
          }
          ]
      }
    ],
    "presets": [
      {
       "name": "Custom Collage" 
      }
      ]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

and i Attach the Image Modal Popup from Stack Overflow.

https://stackoverflow.com/questions/49532763/image-zoom-in-and-zoom-out-by-clicking-the-image-and-showing-popup-by-cliciking

now this code run in my store…with code of Modal Popup zoom

# {{section.settings.custom_colalge_title}}

  {% for blocks in section.blocks %}
  

    
    

    
  
 
  {% endfor %}

  ×
  
  

{% schema %}
  {
    "name": "Custom Collage",
    "settings": [
      {
        "type": "text",
        "id": "custom_collage_title",
        "label": "custom collage title"
      }
    ],
    "max_blocks": 28,
    "blocks": [
      {
       "name": "collage image",
        "type": "collage_image",
        "settings": [
          {
            "type": "text",
            "id": "title",
            "label": "collage title"
          },
          {
          "type": "image_picker",
          "id": "collage_image",
          "label": "collage image"
          }
          ]
      }
    ],
    "presets": [
      {
       "name": "Custom Collage" 
      }
      ]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

here is the image where (pop zoom) just work on it.

Store link: https://learn4shop.myshopify.com/

password: learn4shop