如何使用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的項目頁面中添加圖像鏈接

回答

相關問題