Pinterest "Pin It"버튼 포함/제외 이미지

Question

내 웹 사이트의 각 게시물에는 사진 갤러리가 들어 있습니다. 갤러리는 전체 크기 이미지에 링크되는 축소판 이미지로 구성됩니다. 내 게시물에 PinIt 버튼을 추가했습니다. 문제는 그것이 pining에 대한 thumbnail 이미지를 잡는다는 것입니다.

이런 종류의 문제와 관련하여 내가 찾은 바를 바탕으로 다음과 같은 코드로 끝내 었으며 엄지 손톱을 피닝에서 제외하고 풀 사이즈 이미지를 대신 포함 시켰습니다. 이것들 중 어느 것도 기부하지 않습니다 ...

<a href="path_to_full_image" rel="lightbox[single_post]" pi:pinit:media="path_to_full_image"> 
    <img src="path_to_thumbnail" width="200" height="130" nopin="nopin" /> 
</a> 

어떤 제안이 있습니까?

Answer 1

PinIt 버튼이 풀 사이즈 이미지를 선택하려면 페이지에로드되어 표시되어야합니다. 그렇지 않기 때문에 그리드 갤러리로 가져갈 수 없습니다. 해결 방법으로 PinIt 버튼 클릭 이벤트를 트리거하기 전에 전체 크기 이미지를 미리로드하는 사용자 지정 논리를 제안하는 것이 좋습니다. 이런 식으로 뭔가 :

$('a[rel="lightbox"]').each(function(){ 
    image_src = $(this).attr('href'); 
    $('<img/>').attr('src',image_src).appendTo('#imageContainer'); 
    ; 
}) 
$('#pinItButton').trigger('click'); 

이 당신 것입니다 미리로드 모든 이미지 방식과 이미지를 선택하는 그리드 갤러리를 엽니 다 클릭을 유발 한 후 imageContainer 블록에 넣어합니다.

희망이 있습니다.

Answer 2

이미지 속성에 nopin = "nopin"을 사용하면 핀 동작에서 이미지가 표시되는 것을 피할 수 있습니다. 내가 여기에 게시됩니다 해결책을 발견하는 경우에 대한 예.

,

<img src="http://via.placeholder.com/350x150" nopin = "nopin" />