Trouble with gallery

[Frohmen]

In my HTML i have a bunch of links like the following:

<a class="image-popup-fit-width" href="http://public.hub.mondottica.com.s3.amazonaws.com/l/hub/documents/5bbf2cef00479_HEB23151555.jpg" title="HEB23151555" data-subitems="HEB23151555 Front:http://public.hub.mondottica.com.s3.amazonaws.com/l/hub/documents/5bbf2d52aa07c_HEB23151555_Front.jpg">HEB23151555</a>

My JavaScript looks like this:

`jQuery(document).ready(function($) { $(".image-popup-fit-width").each(function() { var subitems = $(this).attr('data-subitems'); if (subitems === undefined) { $(this).magnificPopup({type: "image", closeOnContentClick: true, image: { verticalFit: false } }); return; }

    subitems = subitems.split(",");
    var items = [{
        src: $(this).attr("href"),
        title: $(this).attr("title")    
    }];
    for (var i = 0; i < subitems.length; i++) {
        var parts = subitems[i].split(":");
        items.push({
            src: parts[0],
            title: parts[1]
        });
    }

    $(this).magnificPopup({
        items: items,
        type: "image",
        closeOnContentClick: true,
        image: { verticalFit: false },
        gallery: { enabled:true }
    });
});

});`

Clicking one of the links only opens up a single image. Please help me find the problem.

Thanks in advance!

[Frohmen]

Nevermind I found the issue. Instead of using : to separate url and title of the items i changed it to |

[Frohmen]

Actually that was one issue, but after fixing it, it still doesn't work.