如何使用JQuery在Squarespace的项目页面中添加图像链接

我正在使用Squarespace的网站上工作。 Squarespace的项目页面允许您添加带有标题和说明的图像，但您无法直接访问编辑页面。他们目前不提供图像点击功能，所以我试图使用JQuery将它添加到图像中。如何使用JQuery在Squarespace的项目页面中添加图像链接

下面是该网页上我的工作：Prestigious Affairs

由于每个负载div编号的变化，我想使用这个类用于项目页（项目slide-的图像图像）来定位它们，然后使用.wrap（）添加href。有人可以让我知道我做错了什么，因为它有点作品，但是整个部分发出脉冲，并且它弄乱了所有左偏移imgaes的标题和描述。

$(function(){ 
    $("img.project-slide-image:eq(0)").wrap('<a href="/about-us/"></a>'); 
    $("img.project-slide-image:eq(1)").wrap('<a href="/events/"></a>'); 
    $("img.project-slide-image:eq(2)").wrap('<a href="/prom/"></a>'); 
    $("img.project-slide-image:eq(3)").wrap('<a href="/weddings/"></a>'); 
    $("img.project-slide-image:eq(4)").wrap('<a href="/floral/"></a>'); 
    $("img.project-slide-image:eq(5)").wrap('<a href="/contact-us/"></a>'); 
});

这似乎是工作，虽然略有不同，在这里：Code Snippet

来源

2017-03-22 Shaun K

好吧，我发现它打破它的原因是因为他们已经把图像放在

标签内。所以，如果我在整个

标签中包装href，它就可以工作。但是现在我被一个超越实际图像的链接卡住了。任何人都可以提出一种方法来只使图像可点击吗？ –

因此，相当多的插科打诨后，我设法找出一个解决方案。我意识到这可能只与Squarespace有关，但也许代码会在某些其他情况下派上用场，所以我会继续发布它。我最终使用.insertBefore而不是.wrap，因为这导致了问题。

这是JQuery的我最终使用：

$(function(){ 
    $('<div class="mainLinksOuter"><a href="/about-us/"><div class="mainLinksRight"></div></a></div>').insertBefore($("figure:eq(0)")); 
    $('<div class="mainLinksOuter"><a href="/events/"><div class="mainLinksLeft"></div></a></div>').insertBefore($("figure:eq(1)")); 
    $('<div class="mainLinksOuter"><a href="/prom/"><div class="mainLinksRight"></div></a></div>').insertBefore($("figure:eq(2)")); 
    $('<div class="mainLinksOuter"><a href="/weddings/"><div class="mainLinksLeft"></div></a></div>').insertBefore($("figure:eq(3)")); 
    $('<div class="mainLinksOuter"><a href="/floral/"><div class="mainLinksRight"></div></a></div>').insertBefore($("figure:eq(4)")); 
    $('<div class="mainLinksOuter"><a href="/contact-us/"><div class="mainLinksLeft"></div></a></div>').insertBefore($("figure:eq(5)")); 
});

所以，我最终将围绕一个DIV，所以我可以控制大小，以确保它会匹配图像尺寸的HREF。我必须为CSS格式化页面右侧的链接，并为左侧的链接另外添加一个链接，以便将内部DIV保留在图像顶部，这是因为Squarespace模板作品。然后为外部DIV添加CSS格式的类。

然后，我把它放在另一个DIV中，以便能够将它放在我想要的页面上。如果不这样做，我无法控制由href环绕的DIV结束位置，并且网站格式更改为移动宽度为768px，宽度为640px，因此我必须为这些实例调整CSS。

因此，基本上，我最终得到的是一个空的DIV，它的每个图像的顶部都有一个href，并保留在顶部，并通过响应式设计调整大小。

来源

2017-03-22 19:03:00

如何使用JQuery在Squarespace的项目页面中添加图像链接

回答

相关问题