Question

我正在创建一个网站，并且使用了放大弹出框只是为了放大部分中的图像。我可以单击每张图像，它可以工作。问题是没有显示有助于查看其他图像的滚动图标。

在这里您可以找到与js代码有关的htl页面的一部分：

<div class="row no-bord">
    <div class="col-md-3 pic">
        <div class="img-seletion">
            <a href="img/work_section/coaching-coders-coding-7374.jpg" title="pic1">
                <img src="img/work_section/coaching-coders-coding-7374.jpg" alt="pic1" class="img-responsive">
            </a>
        </div>
    </div>
    <div class="col-md-3 pic">
        <div class="img-seletion">
            <a href="img/work_section/adult-business-coding-1181677.jpg" title="pic2">
                <img src="img/work_section/adult-business-coding-1181677.jpg" alt="pic1" class="img-responsive">
            </a>
        </div>
    </div>
</div>

js代码：

$(function(){
    $(".no-bord").magnificPopup({
        delegate: 'a', type: 'image'
    });
});

Answer 1

尝试：

<div class="row no-bord">
    <div class="col-md-3 pic">
        <div class="img-seletion">
            <a href="img/work_section/coaching-coders-coding-7374.jpg" title="pic1" class='popup'>
                <img src="img/work_section/coaching-coders-coding-7374.jpg" alt="pic1" class="img-responsive">
            </a>
        </div>
    </div>
    <div class="col-md-3 pic">
        <div class="img-seletion">
            <a href="img/work_section/adult-business-coding-1181677.jpg" title="pic2" class='popup'>
                <img src="img/work_section/adult-business-coding-1181677.jpg" alt="pic1" class="img-responsive">
            </a>
        </div>
    </div>
</div>

$(function(){
    $(".popup").magnificPopup({
        delegate: 'a', type: 'image'
    });
});

让我知道它是否无效。

Answer 2

将此添加到您的CSS

.popup{
    cursor:zoom-in;
}

宏伟的弹出窗口：滚动图标未出现

2 个答案: