JQuery를 사용하여 Squarespace의 프로젝트 페이지에있는 이미지에 링크를 추가하는 방법

Question

Squarespace를 사용하여 웹 사이트에서 작업하고 있습니다. Squarespace의 프로젝트 페이지를 사용하면 제목과 설명이 포함 된 이미지를 추가 할 수 있지만 직접 편집 할 수는 없습니다. 현재 이미지 클릭 연결 기능을 제공하지 않으므로 JQuery를 사용하여 직접 이미지에 추가하려고합니다. 여기

내가 일하고 있어요 웹 사이트 페이지입니다 : 모든 부하에 DIV id를 변경 이후 Prestigious Affairs

, 나는 프로젝트 페이지 (프로젝트 slide-에 사용되는 이미지의 클래스를 사용하려고 해요 이미지)를 사용하여 타겟팅 한 다음 .wrap()을 사용하여 href를 추가합니다. 누군가는 저에게 일의 종류가 있기 때문에 내가 잘못하고있는 것을 알려 줄 수 있습니까? 그러나 전체 섹션 펄스는 왼쪽 오프셋 모든 이미지의 제목과 설명을 엉망으로 만듭니다.

$(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

Answer 1

그래서, 장난 꽤 후, 나는 해결책을 알아낼 수 있었다. 아마 이것이 Squarespace에만 관련이 있다는 것을 알았지 만 코드가 누군가를 위해 다른 상황에서 유용 할 수 있으므로 아마도 게시 할 것입니다. 문제가 발생한 이후로 .wrap 대신 .insertBefore를 사용하여 종료되었습니다.

이것은 내가 사용하여 종료 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를 삽입 끝났다. 나는 이미지의 상단에 내부 DIV를 유지하기 위해 CSS의 클래스를 페이지의 오른쪽에있는 링크와 왼쪽에있는 링크에 대해 별도로 포맷해야했습니다. Squarespace 템플릿 공장. 그런 다음 외부 DIV가 CSS 서식을 추가하는 클래스입니다.

그런 다음 다른 DIV 안에 넣으면 페이지에서 원하는 위치에 배치 할 수 있습니다. 그렇게하지 않으면 href로 둘러싸인 DIV 서라운드가 끝나는 위치를 제어 할 수 없었으며 768px와 640px 크기의 모바일 용 사이트 형식이 변경되어 해당 인스턴스에 대해 CSS를 조정해야했습니다.

기본적으로, 내가 끝내는 것은 각 이미지 상단에 href가있는 빈 DIV이며 나머지는 맨 위에 놓고 반응 형 디자인으로 크기를 조정합니다.