html - 如何在以下代码中添加到另一个页面的链接？

Question

我正在尝试设置我购买的商业 html 模板，但在更改一个简单的东西时遇到了一些麻烦。 你可以在这里看到模板: http://static.liveplace.gr/duk3r/green/index.html

我想更改索引页中间的portfolio。现在，当您点击图片或标题时，它会使用 lightbox 以更大的分辨率打开图片。我想为缩略图保留它，但是当我点击图片标题栏时，我想转到另一个 html 页面。

该部分的单个投资组合元素的 html 代码是:

<div class="3u 12u(mobile)">
    <div class="thumbnail">
        <a href="images/portfolio/fulls/pic01.jpg" class="image fit">
            <img src="images/portfolio/thumbnails/pic01.jpg" alt="" title="Etiam Dolore">
            <span class="titlebar">Etiam Dolore</span>
        </a>
    </div>
</div>

试图将其更改为:

<div class="3u 12u(mobile)">
    <div class="thumbnail">
        <a href="images/portfolio/fulls/pic01.jpg" class="image fit">
            <img src="images/portfolio/thumbnails/pic01.jpg" alt="" title="Etiam Dolore">
        </a>
        <span class="titlebar">
            <a href="otherpage.html">Etiam Dolore</a>
        </span>
    </div>
</div>

但是当我按下标题时，它仍然会打开一个空白的灯箱(因为链接中没有图像。

有什么想法吗？

编辑1:

检查了 js 文件，只能找到对投资组合元素的引用:

// Portfolio.
            var $portfolio = $('#portfolio');
            if ($portfolio.length > 0)
            {
                // Tabs
                    $portfolio.rotatorrr({
                        titlesSelector: '.titles li',
                        slidesSelector: '.slides li'
                    });

                // Thumbnails
                    var poptroxSettings;

                    if (skel.breakpoint('mobile').active)
                        poptroxSettings = {
                            overlayClass: 'poptrox-overlay skel-layers-fixed',
                            usePopupDefaultStyling: false,
                            usePopupCaption: false,
                            usePopupCloser: false,
                            usePopupEasyClose: true,
                            usePopupNav: false,
                            useBodyOverflow: false,
                            windowMargin: 10,
                            overlayOpacity: 0.85,
                            popupWidth: 0,
                            popupHeight: 0
                        };
                    else
                        poptroxSettings = {
                            overlayClass: 'poptrox-overlay skel-layers-fixed',
                            usePopupDefaultStyling: false,
                            usePopupCaption: true,
                            usePopupCloser: true,
                            usePopupEasyClose: false,
                            usePopupNav: true,
                            popupCloserText: ''
                        };

                    $portfolio.find('.slides li').poptrox(poptroxSettings);

            }

可以找到整个css文件here .

Answer 1

来自 Poptrox 的文档。

Poptrox parses all anchors inside the element you call it on, even if they're nested in other stuff.

我认为如果您将 html 代码更改为:

<div class="3u 12u(mobile)">
    <div class="thumbnail">
        <div class="poptroxSelector">
            <a href="images/portfolio/fulls/pic01.jpg" class="image fit">
                <img src="images/portfolio/thumbnails/pic01.jpg" alt="" title="Etiam Dolore">
            </a>
        </div>
        <span class="titlebar">
            <a href="otherpage.html">Etiam Dolore</a>
        </span>
    </div>
</div>

以及poptrox发起的js代码

$portfolio.find('.poptroxSelector').poptrox(poptroxSettings);