Получить отдельное изображение src и заголовок для Pinterest в плагине prettyPhoto?

Pinterest предназначен для отдельных фотоизображений, а не для URL-адресов веб-страниц. В Twitter и Facebook можно использовать только URL-адрес страницы, но для Pinterest каждый URL-адрес отдельного изображения должен быть указан в ссылке кнопки «Прикрепить», а не в URL-адресе страницы.

Я пытаюсь добавить кнопку Pin It в плагин prettyPhoto, и пока все настроено, за исключением того, что я не знаю, как получить img src и заголовок каждого из отдельных изображений на слайде, чтобы прикрепить их в «Пинта». Это" ссылка.

Что у меня сейчас есть сразу после кода facebook в jquery.prettyPhoto.js:

<div class="pinterest">
    <a href="http://pinterest.com/pin/create/button/?url='+window.location.href+'&media='+$('#fullResImage').attr('src')+'&description='+$(this).attr('title')+'" class="pin-it-button" count-layout="horizontal" target="_blank">
        <img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" />
    </a>
</div>

Но ни $('#fullResImage').attr('src'), ни $(this).attr('title') по какой-то причине не работают правильно. Вы можете просмотреть страница здесь, сценарий здесь. Они «не определены» и пусты.

Может кто-нибудь, пожалуйста, помогите мне заставить их работать? Большое спасибо!


jquery lightbox pinterest prettyphoto
person datasn.io    schedule 21.11.2012    source источник

Ответы (4)


arrow_upward
1
arrow_downward

как вы все знаете, Pinterest предназначен для отдельных фотоизображений, а не для URL-адресов веб-страниц, поэтому нам нужно сделать что-то другое, например:

<a href="http://pinterest.com/pin/create/button/?url='+encodeURIComponent(location.href.replace(location.hash,""))+'&media={path}&description={title}" class="pin-it-button" count-layout="horizontal" target="_blank">
    <img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" />
</a>

это не будет работать здесь, в красивой фотогалерее, так что вот решение,

мы должны использовать код в script.js при инициализации симпатичного фото.

вот так, код

$(document).ready(function(){
    $(‘.prettyPhoto’).prettyPhoto({
        changepicturecallback: onPictureChanged,
    });

    function onPictureChanged() {

    var href= “http://pinterest.com/pin/create/button/?url=”‘+ encodeURIComponent(location.href.replace(location.hash,”")) +’”&media=”+$(‘#fullResImage’).attr(‘src’);

    jQuery(‘.pp_social’).append(“<div class=’pinterest’ ><a href=’”+ href +”‘ class=’pin-it-button’ count-layout=’horizontal’ target=’_blank’><img border=’0′ src=’http://assets.pinterest.com/images/PinExt.png’ title=’Pin It’ /></a></div>”);
}

для полного описания, пожалуйста, посетите мою обучающую страницу.

Добавьте Pinterest к значкам социальных сетей в prettyPhoto< /а>

я уверен, что это поможет вам много.

Спасибо

person user2585941    schedule 26.07.2013

arrow_upward
1
arrow_downward

Я не уверен, как могло бы сработать вышеуказанное решение, поскольку {path} никогда не заменяется в settings.social_tools.

Единственный способ состоял в том, чтобы объявить глобальный и назначить ему URL-адрес мультимедиа в зависимости от случая (изображение/видео/и т. д.) и, наконец, обновить .pp_social div

Я уверен, что это можно сделать более элегантно, но это скорее быстрый патч, и он просто работает.

Для тех, кто ищет решение, вот модифицированный javascript симпатичного фото

person Janze Siaro    schedule 06.02.2013

arrow_upward
1
arrow_downward

Только так это сработает.

Не используйте идентификатор для изображений, потому что каждый раз, когда вы хотите закрепить изображение, каждый раз будет использоваться первое изображение с идентификатором на вашей веб-странице.

См. ниже код:

$('.prettyPhoto').prettyPhoto({ changepicturecallback: onPictureChanged, });

function onPictureChanged() {

  var href= "http://pinterest.com/pin/create/button/?url=" + encodeURIComponent(location.href.replace(location.hash,"")) +"&media="+$('#pp_full_res').find('img').attr('src');

  jQuery('.pp_social').append("<div class='pinterest' ><a   href='"+ href +"' class='pin-it-button' count-layout='horizontal' target='_blank'><img border='0' src='http://assets.pinterest.com/images/PinExt.png' title='Pin It'/></a></div>");

}
person Simon V    schedule 21.05.2015

arrow_upward
0
arrow_downward

Изменил код на это, и теперь он работает:

<div class="pinterest">
    <a href="http://pinterest.com/pin/create/button/?url='+encodeURIComponent(location.href.replace(location.hash,""))+'&media={path}&description={title}" class="pin-it-button" count-layout="horizontal" target="_blank">
        <img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" />
    </a>
</div>
person datasn.io    schedule 22.11.2012