Блок «Поделиться» в jquery.prettyPhoto

Как-то я узнал, что использовать блоки «Поделиться» типа AddThis и ShareThis в плагинах типа jquery.prettyPhoto или lytebox крайне затруднительно, если хочется, чтобы, например, при нажатии на кнопки «влево-вправо» (пред/след) ссылка обновлялась, а также, чтобы ссылка была верной уже при первом нажатии на элемент, по которому открывается модальное окно, либо при первом посещении страницы, т.е. когда кто-то вставил в адресную строку готовый адрес (в том числе с хэшом). Конечно при использовании share-сервисов с целью делиться каждый раз одним и тем же адресом для всех модальных окон проблем возникнуть не должно, т.е. вопрос вставки в модальное окно самого блока – задача достаточно простая, хотя и тут могут возникнуть некоторые проблемы. Не помню точно, но кажется из-за этого я остановился на сервисе «Поделиться» от Яндекса, который по крайней мере без проблем вставился в jquery.prettyPhoto и каждый раз реагировал на нажатия.

Немного жаль, что история моей работы...

Немного жаль, что история моей работы, т.е. борьбы с необновлением ссылки, пропаданием блока, нуждой кликать на него два раза и т.д. потеряна, но хотелось бы просто поделиться конечным результатом. Во-первых (речь пойдёт о сочетании jquery.prettyPhoto и Yandex.Share) в последний следует добавить аргумент «описание» в метод обновления ссылки.
Далее, надо продумать, в какое место вставлять код, порождающий объект YandexShare. Это будет непосредственно место под контентом в конструкторе prettyPhoto:

social_tools: /* html code or false to disable */
'<div id="photo_shblock" style="text-align: right; margin-right: 21px; margin-top: -27px;">Поделиться:<script>' +
    "var YaShare = new Ya.share({\n" +
    "    onready: function(instance) {\n" +
    "" +
    "    }," +
    "    element: 'photo_shblock',\n" +
    "    elementStyle: {\n" +
    "        'type': 'none',\n" +
    "        'border': false,\n" +
    "        'quickServices': ['vkontakte', '|', 'facebook', '|', 'twitter', '|', 'odnoklassniki', '|', 'lj']\n" +
    "    },\n" +
    "    title: document.title,\n" +
    "    description: 'http://kremer.pro/gallery/',\n" +
    "    image: ''\n" +
    "});\n" +
    "jQuery('#photo_shblock').prepend('<span id=\"share_title\" style=\"color: #DDD; opacity: 0.8\">Поделиться: </span>');" +
'</script></div>'

Теперь в метод changePage(direction) добавляем вызов самописного метода updateYaShare(); после строчки “rel_index = set_position;“.

А в самом конце плагина (перед ‘})(jQuery);‘) добавляем:

function updateYaShare() {
    var hash = location.hash;
    var hashBase = hash.substring(0, hash.indexOf("/") + 1);
    var newHash = hashBase + rel_index + "/";
    var newLink = location.href.substring(0, location.href.indexOf('#')) + newHash;
    window.YaShare.updateShareLink(newLink, document.title, {}, "http://kremer.pro/gallery/");
}

Собственно, вот и всё решение. В работе это можно увидеть в галерее.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>