将lightbox缩略图链接到帖子,而不是打开lightbox

时间:2012-11-28 作者:Andrew

在我的website portfolio 我使用了Woo Themes中经过大量修改的Swatch主题。

该主题使我的作品集缩略图链接到灯箱。我希望缩略图链接到他们所属的帖子。(如果单击缩略图下方的标题

我找不到如何修复编码以便发生这种情况。

我找到了问题所在的元素:

<div class="portfolio-items">
        <div id="portfolio-item-id-114" class="post-114 portfolio type-portfolio status-publish hentry group post portfolio-img clients identity web portfolio-item">
                    <div class="portfolio-image drop-shadow lifted">
            <a rel="lightbox[114]" title="" href="http://smalldotdesign.com/wp-content/uploads/2012/11/Right-Futon-Logo.001-300x300.png" class="thumb" style="height: 200px;">
                <img src="http://smalldotdesign.com/wp-content/themes/swatch/functions/thumb.php?src=http://smalldotdesign.com/wp-content/uploads/2012/11/Right-Futon-Logo.001-300x300.png&#038;w=200&#038;h=200&#038;zc=1&#038;q=90&#038;a=c" alt="" class="woo-image"  width="200"  height="200"  />            </a>
            </div>
所以我知道我想把它改成一个模板

<div class="portfolio-items">
        <div id="portfolio-item-id-114" class="post-114 portfolio type-portfolio status-publish hentry group post portfolio-img clients identity web portfolio-item">
                    <div class="portfolio-image drop-shadow lifted">
            <a rel="smalldotdesign.com/postURLgoeshere" title="" href="http://smalldotdesign.com/wp-content/uploads/2012/11/Right-Futon-Logo.001-300x300.png" class="thumb" style="height: 200px;">
                <img src="http://smalldotdesign.com/wp-content/themes/swatch/functions/thumb.php?src=http://smalldotdesign.com/wp-content/uploads/2012/11/Right-Futon-Logo.001-300x300.png&#038;w=200&#038;h=200&#038;zc=1&#038;q=90&#038;a=c" alt="" class="woo-image"  width="200"  height="200"  />            </a>
            </div>
我不是编码员。。。但我有点理解。如何做到这一点?我必须修改什么文件(CSS等)才能修复此问题,该文件在哪里?我找不到它。

我使用Wordpress。我的网站的组织安装。我可以访问我的网站托管的整个服务器。我会找到哪个文件夹来编辑更改样式模板的文件?是否有样式模板?每次我创建新的投资组合条目时,是否需要编辑某个文件?

1 个回复
SO网友:Ralf912

这个rel 属性只是lightbox 剧本这个href属性始终链接到应该打开的文档。

那么什么去哪里了。我们有两个要素。一个用于显示图像,另一个用于链接到另一个文档(图像也是文档!)。让我们从链接元素(又名a-tag)开始。

<a href="document-url" rel="relationship between the current document and the linked document">Linktext</a>
现在,我们有了一个指向带有可单击文本的文档的普通链接。但我们想要的是图像而不是文本。我们必须用a标签内的文本替换图像。

<a href="url" rel="description">
  <img src="image-url" rel="relationship to the current document" />
</a>
现在我们有了一个可单击的图像,可以链接到另一个文档。

灯箱呢?

如果我们想将图像作为指向其他文档的可单击链接,我们可以not 使用灯箱。因为链接只能做一件事:在灯箱中显示图像或链接到其他文档。lightbox脚本错误使用了rel 属性作为指示,指示图像是否应显示在灯箱中。如果lightbox脚本不可用(例如,停用的javascript),那么a-tag只是一种后备方法。

结束