Lightbox内图片超链接失效问题排查与实现需求

问题原因 #

1. 悬停显示缩小图：你在第二个<a>标签里嵌套了与主图相同的<img>，这个图片会在悬停时显示的portfolio-btn层中渲染，由于按钮层尺寸小于主图容器，导致图片被压缩显示为缩小版。
2. 超链接失效：两个<a>标签共用data-lightbox="portfolio"属性，Lightbox会将它们识别为同组图片进行切换，而非触发跳转；同时Lightbox默认仅处理图片资源链接，无法直接跳转HTML页面。

解决方案（两种可选） #

方案一：点击Lightbox内的图片跳转至说明页

保留Lightbox预览功能，点击Lightbox中的图片时跳转到explainpage.html：

修改后的HTML代码：

<div class="col-lg-4 col-md-6 mb-4 portfolio-item first">
    <div class="position-relative overflow-hidden mb-2">
        <img class="img-fluid rounded w-100" src="img/portfolio-1.png" alt="">
        <div class="portfolio-btn bg-primary d-flex align-items-center justify-content-center">
            <a href="img/portfolio-1.png" data-lightbox="portfolio" data-title="点击图片跳转至说明页" data-target-link="explainpage.html">
                <i class="fa fa-plus text-white" style="font-size: 60px;"></i>
            </a>
        </div>
    </div>
</div>

添加JavaScript代码（适配Lightbox2）：

// 监听Lightbox图片点击事件
document.addEventListener('click', function(e) {
    const lightboxImage = e.target.closest('.lb-image');
    if (lightboxImage) {
        // 获取预定义的跳转链接
        const targetLink = document.querySelector('[data-lightbox="portfolio"]').getAttribute('data-target-link');
        if (targetLink) {
            window.location.href = targetLink;
        }
    }
});

方案二：直接点击主图片跳转（保留Lightbox预览按钮）

如果需要点击主图直接跳转，同时保留加号按钮打开Lightbox预览：

<div class="col-lg-4 col-md-6 mb-4 portfolio-item first">
    <div class="position-relative overflow-hidden mb-2">
        <!-- 主图片包裹跳转链接 -->
        <a href="explainpage.html">
            <img class="img-fluid rounded w-100" src="img/portfolio-1.png" alt="">
        </a>
        <!-- 加号按钮用于打开Lightbox预览 -->
        <div class="portfolio-btn bg-primary d-flex align-items-center justify-content-center">
            <a href="img/portfolio-1.png" data-lightbox="portfolio">
                <i class="fa fa-plus text-white" style="font-size: 60px;"></i>
            </a>
        </div>
    </div>
</div>

内容的提问来源于stack exchange，提问作者user19618932