html - 如何在我的画廊和另一个 slider 中添加指向图片的链接

Question

我正在尝试在我的图库部分添加指向 infobig2.jpg 图像的链接。进入画廊后，我还想添加另一张幻灯片。我的网站是信息图表部分的 www.24kdesignz.com 我希望图片链接到 http://vs0022.businesscatalyst.com/

<img class="img-responsive project-image" src="assets/images/info.jpg" alt=""><!--Project thumb -->

<div class="hover-mask">
<h2 class="project-title">Infographic</h2><!--Project Title -->
<p>Illustrated | Icon Driven</p><!--Project Subtitle -->
</div>

<!--==== Project Preview HTML ====-->

<div class="sr-only project-description" data-images="assets/images/infobig.jpg,assets/images/infobig2.jpg" >

<p>Infographics – An Infographic is a visual representation of data and  information that is presented through a series of design-centric graphics. Its sole purpose is to educate viewers on a topic in a simplistic way – with information that is easy to digest.</p>

</div>
</article><!--End Project Item -->

Answer 1

检查您的网站后，您似乎有很多插件。使用名为“Masonry”的 jQuery 库注入(inject)网站主题中的投资组合元素部分。在您的元素 Assets >> javascript 文件夹中，还有一个名为“scripts.js”的文件 - 这是主题作者将图像注入(inject)投资组合元素元素的地方。

解决方案:图片不能是链接。您必须将其包装在 anchor 标记中。在您的特定情况下，您将不得不使用 jQuery 来完成。

假设您的 HTML 标记看起来像这样，为您想要成为链接的图像添加一个唯一的 id 选择器:

<li id ="image2">
  <img id ="uniqueId" src="/assets/images/infobig2.png">
</li>

然后使用 jQuery 抓取它并将其包装在 anchor 标记中:

$("#uniqueId").wrap($('<a>', {
  href: '/assets/png/' + data.uniqueId
}));

如果您不喜欢编辑主题的 jQuery 代码，这里的另一个解决方案是使用纯 html 在图像下添加一个链接。