Since I don't yet have enough reputation points to comment, I'm commenting here, in addition to providing a solution.

Comment: JSFiddle isn't working with your http:// images because JSFiddle is trying to serve them from https://

Solution:

You are halfway there. There are 2 parts to making the captions work.

1. You correctly have put the link in the anchor tag and not the image tag

2. You must specify your title source in your initialization script like this.

   $(document).ready(function() {
       $('.chicken').magnificPopup({ 
           type: 'image',
           gallery:{enabled:true},
           type: 'image',
           image: {
               titleSrc: 'title' 
               // this tells the script which attribute has your caption
           }
       });
   });
   

The script then automatically writes your caption to its div labeled class="mfp-title"

BONUS Solution: I needed my lightbox image to open in a new window for users on their phones to zoom in, so I added this after the first titleSrc declaration:

    titleSrc: 'title',
    titleSrc: function(item) {
        return '<a href="' + item.el.attr('href') + '">' + item.el.attr('title') + '</a>';
        }

This information is in the documentation: http://dimsemenov.com/plugins/magnific-popup/documentation.html in the "Image Type" section

You can create two separate magnificPopup for both parent..

$('.imageParent').each(function() {
    $(this).magnificPopup({
        delegate: 'a.zoom',
        type: 'image',
        gallery: {
            enabled: true,
            preload: [0,2]
        }
    });
});

$('.imageParent').each(function() { 
    $(this).magnificPopup({
        delegate: 'a.zoom',
        type: 'image',
        gallery: {
            enabled: true,
            preload: [0,2]
        }
    });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>
<span class ="imageParent parent1">
    <a href="#" target="_blank">
        <span class="portfolio-links">
            <span class="ion-ios-arrow-right portfolio-links-icons">noimage</span> 
        </span>
    </a>&nbsp;
    <a href="https://images.pexels.com/photos/34950/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" class="zoom" >
        <span class="portfolio-links">
            <span class="ion-arrow-expand portfolio-links-icons">image 1</span> 
        </span>
    </a>&nbsp;
    <a href="https://media.istockphoto.com/photos/plant-growing-picture-id510222832?k=6&m=510222832&s=612x612&w=0&h=Pzjkj2hf9IZiLAiXcgVE1FbCNFVmKzhdcT98dcHSdSk=" class="zoom">image2</a>&nbsp;
</span>
<span class="imageParent parent2">
    <a href="#" target="_blank">
        <span class="portfolio-links">
            <span class="ion-ios-arrow-right portfolio-links-icons">noimage</span> 
        </span>
    </a>&nbsp;
    <a href="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" class="zoom">
        <span class="portfolio-links">
            <span class="ion-arrow-expand portfolio-links-icons">image 3</span> 
        </span>
    </a>
</span>

You can also test it here .. https://jsfiddle.net/nimittshah/vgpsyado/

Without repeating same code.. https://jsfiddle.net/nimittshah/vgpsyado/8/

From the documentation:

To have multiple galleries on a page, you need to create a new instance of Magnific Popup for each seperate gallery. For example

<div class="gallery">
    <a href="path-to-image.jpg">Open image 1 (gallery #1)</a>
    <a href="path-to-image.jpg">Open image 2 (gallery #1)</a>
</div>
<div class="gallery">
    <a href="path-to-image.jpg">Open image 1 (gallery #2)</a>
    <a href="path-to-image.jpg">Open image 2 (gallery #2)</a>
    <a href="http://vimeo.com/123123" class="mfp-iframe">Open video (gallery #2). Class mfp-iframe forces "iframe" content type on this item.</a> 
</div>

Javascript

$('.gallery').each(function() { // the containers for all your galleries
    $(this).magnificPopup({
        delegate: 'a', // the selector for gallery item
        type: 'image',
        gallery: {
          enabled:true
        }
    });
});

Hope that helps!

Here is a simple solution I've used for this:

$('.image-link, .video-link').magnificPopup({
    callbacks: {
      elementParse: function(item) {
         // the class name
         if(item.el.context.className == 'video-link') {
           item.type = 'iframe';
         } else {
           item.type = 'image';
         }
      }
    },
    gallery:{enabled:true},
    type: 'image',
});

It should work with type formatters.