大家好，所以我开始了解HTML，CSS和JS，我正努力帮助一个朋友解决他的弹出画廊中遇到的一个小问题。

因此，他当前添加了2个主图像，并且每个图像在单击时应打开4个弹出图像，但是发生的情况是，单击哪个主图像都没有关系，弹出画廊将加载所有8个图像。 / p>

这是他的HTML代码：

<section id="mobileapps" class="iq-page-blog">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-4">
                <div class="iq-blog-box">
                        <div class="iq-blog-image clearfix popup-gallery">
                            <div class="item">
                                <a href="images/screenshots/05.jpg" class="popup-img">
                                <a href="images/screenshots/06.jpg" class="popup-img">
                                <a href="images/screenshots/07.jpg" class="popup-img">
                                <a href="images/screenshots/08.jpg" class="popup-img">
                                <img class="img-responsive" src="images/services/radio.png" alt="#"></a></a></a></div>
                            </div>  
                        <div class="iq-blog-detail">
                            <div class="blog-title"> <section class="text-center"><h5 class="iq-tw-6">Title goes here</h5> </a> </div>
                            <div class="blog-content">
                                <p>Test goes here.</p>
                                <p>*Text goes here.</p>
                            </div>

我将popup-gallery追溯到他的JS文件夹并找到了：

$('.popup-gallery').magnificPopup({
    delegate: 'a.popup-img',tLoading: 'Loading image #%curr%...',type: 'image',mainClass: 'mfp-img-mobile',gallery: {
        navigateByImgClick: true,enabled: true,preload: [0,1]
    },image: {
        tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
    }
});

是否可以添加一些内容，以使每个主图像加载到其中自己的弹出图像？

他的网站尚未启用，但是这里有一个示例图片，您可以看到每个主图片总共加载了8个而不是4个。

非常感谢您的帮助。