multiple magnific popup

<div class="magnific-popup">
  <!-- Your content here -->
</div>

<script>
  $('.magnific-popup').magnificPopup({
    type: 'image',
    items: {
      src: 'path-to-image.jpg'
    },
    gallery: {
      enabled: true
    },
  });
</script>

If you need to create multiple magnific popup elements in your HTML page, you can use the jQuery plugin magnificPopup. This plugin will allow you to create a gallery of multiple magnific popup elements. To do this, you will need to add a div element with a class of "magnific-popup". You will also need to add a script tag to your HTML page which will call the magnificPopup plugin. The code for the script tag will look like this:

$('.magnific-popup').magnificPopup({
    type: 'image',
    items: {
      src: 'path-to-image.jpg'
    },
    gallery: {
      enabled: true
    },
  });

The .magnific-popup class will target the div element that contains your magnific popup elements. The type property specifies what type of content will be displayed in the popup. The image option will open an image in the popup. The items property will be an object that contains the source of the image. The gallery property will be an object that contains the option to enable a group of items to be displayed in the popup. Once the script tag is added, you can add additional div elements with the same class of "magnific-popup" and the plugin will add each of them to the same popup. This will allow you to create multiple magnific popup elements and have them all open at the same time.