Question

使用jQuery和Magnific Popup的新手 - 我有一个图像网格，当你点击一个图像时，我想要一个大胆的弹出窗口来显示一个div，其中包含与特定图像相关的信息。

<div class="grid">
    <div class="grid-item">
        <a href="#test-popup" class="open-popup-link"><img class="object open-popup-link" src="i/objects/8/a.jpg" alt="3D Printed Object"></a>
        <div id="test-popup" class="popup mfp-hide">
            <div class="maker-profile">
                <img class="headshot" src="i/maker.jpg" alt="Designer of 3D printed object">
                <h2>A, aged 8</h2>
                <h3>Who are you?</h3>
                <h3>What inspires you?</h3>
                <h3>What do you like most about design?</h3>
            </div>
        </div>
    </div>
    <div class="grid-item">
        <a href="#test-popup" class="open-popup-link"><img class="object open-popup-link" src="i/objects/8/ab.jpg" alt="3D Printed Object"></a>
        <div id="test-popup" class="popup mfp-hide">
            <div class="maker-profile">
                <img class="headshot" src="i/maker.jpg" alt="Designer of 3D printed object">
                <h2>Ab, aged 8</h2>
                <h3>Who are you?</h3>
                <h3>What inspires you?</h3>
                <h3>What do you like most about design?</h3>
            </div>
        </div>
    </div>
    <div class="grid-item">
        <a href="#test-popup" class="open-popup-link"><img class="object open-popup-link" src="i/objects/8/f.jpg" alt="3D Printed Object"></a>
        <div id="test-popup" class="popup mfp-hide">
            <div class="maker-profile">
                <img class="headshot" src="i/maker.jpg" alt="Designer of 3D printed object">
                <h2>F, aged 8</h2>
                <h3>Who are you?</h3>
                <h3>What inspires you?</h3>
                <h3>What do you like most about design?</h3>
            </div>
        </div>
    </div>

这是jQuery -

$(function() {
 $('.open-popup-link').magnificPopup({
  type:'inline',
  midClick: true
 })
});

当你点击网格中的任何图像时，会发生什么（img.object）Magnific Popup只显示第一个网格项中的div（.test-popup）。

Answer 1

这是因为您的所有.popup元素都具有相同的id（＆＃34; test-popup＆＃34; ）。因此，当您尝试使用<a href="#test-popup">定位它们时，您最终会找到第一个。（ id在页面中必须是唯一的）。

如果您更改id以使其唯一，那么您将没有问题。

<div class="grid">
    <div class="grid-item">
        <a href="#test-popup-1" class="open-popup-link"><img class="object open-popup-link" src="i/objects/8/a.jpg" alt="3D Printed Object"></a>
        <div id="test-popup-1" class="popup mfp-hide">
            <div class="maker-profile">
                <img class="headshot" src="i/maker.jpg" alt="Designer of 3D printed object">
                <h2>A, aged 8</h2>
                <h3>Who are you?</h3>
                <h3>What inspires you?</h3>
                <h3>What do you like most about design?</h3>
            </div>
        </div>
    </div>
    <div class="grid-item">
        <a href="#test-popup-2" class="open-popup-link"><img class="object open-popup-link" src="i/objects/8/ab.jpg" alt="3D Printed Object"></a>
        <div id="test-popup-2" class="popup mfp-hide">
            <div class="maker-profile">
                <img class="headshot" src="i/maker.jpg" alt="Designer of 3D printed object">
                <h2>Ab, aged 8</h2>
                <h3>Who are you?</h3>
                <h3>What inspires you?</h3>
                <h3>What do you like most about design?</h3>
            </div>
        </div>
    </div>
    <div class="grid-item">
        <a href="#test-popup-3" class="open-popup-link"><img class="object open-popup-link" src="i/objects/8/f.jpg" alt="3D Printed Object"></a>
        <div id="test-popup-3" class="popup mfp-hide">
            <div class="maker-profile">
                <img class="headshot" src="i/maker.jpg" alt="Designer of 3D printed object">
                <h2>F, aged 8</h2>
                <h3>Who are you?</h3>
                <h3>What inspires you?</h3>
                <h3>What do you like most about design?</h3>
            </div>
        </div>
    </div>
</div>

Magnific Popup仅显示第一项

1 个答案: