时间戳

首页 > 解决方案 > 引导网格的图像超链接问题

html - 引导网格的图像超链接问题

问题描述

我正在尝试使用引导程序将图像网格放在个人网站上（目前只有一个图像）。网格上升得很好，但是当单击图像时，页面会尝试创建预览或其他内容并显示以下警告： 点击链接，无法发布图像

此处的文本“The image #1”是指向所需页面的可点击超链接。这是html。

<div id="portfolio">
  <div class="container-fluid p-0">
    <div class="row justify-content-center no-gutters">
      <div class="col-lg-4 col-sm-6">
        <a href="#"><img class="img-fluid" src="assets/img/portfolio/thumbnails/image.png" alt="" /></a>
      </div>
    </div>
   </div>
</div>

标签： htmltwitter-bootstrap

解决方案

在您的代码中www.trenty.net，问题来自以下magnific-popup库代码

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

当您单击它时，它将把元素的所有a标签#portfolio变成预览弹出窗口。

这可以通过删除此 JavaScript 或对其进行调整（如上）来排除您不希望它打开预览弹出窗口的元素来解决

推荐阅读