Question

我正在尝试设置我购买的商业html模板，但在更改简单内容时遇到了一些麻烦。您可以在此处查看模板： http://static.liveplace.gr/duk3r/green/index.html

我想更改索引页面中间的作品集。现在，当您按图片或标题时，它会使用 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>

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

有什么主意吗？

Edit1：

检查了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);

            }

可以在here中找到整个CSS文件。

Answer 1

来自Poptrox的文档。

Poptrox解析您调用的元素内的所有锚点，即使它们嵌套在其他内容中。

我认为，如果您将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);

如何通过以下代码添加到另一页的链接？

1 个答案: