HTML / JS 上的彈出式圖庫在同一輪播中顯示所有圖像

Question

大家好，所以我開始了解 HTML、CSS 和 JS 的竅門，我正試圖幫助一位朋友解決他在彈出式畫廊中遇到的一個小問題。

所以他目前添加了 2 個主圖像，每個圖像在單擊時應該打開 4 個彈出圖像，但是發生的情況是，單擊哪個主圖像並不重要，彈出庫將加載所有 8 個圖像。

這是他的 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 個。

任何幫助深表感謝。

Answer 1

所以看起來@T.Shah 提供的答案是正確的，只是為每個彈出窗口創建了一個新的 class 。

Keep the images in different galleries by specifying the different class container for each. One could be already existing one 'popup-gallery' and give a different class name to the other one. Then add another function for that gallery similar to this - $('.popup-gallery').magnificPopup