—»     —»   Разработка Pinterest Pin It плагина на jQuery
  Раздел: Скрипты и коды   Комментариев: 3  

Разработка Pinterest Pin It плагина на jQuery



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

Как вы вероятно уже заметили, в наши дни кнопка Pin it может быть увидена практически на любом веб-сайте. Социальная сеть также выпустила специальный букмарклет, который сканирует страницу на наличие изображений и позволяет вам поделиться ими на вашей доске в Pinterest. Тем не менее, иногда это бывает очень неудобно. Например, когда на странице размещено 30 и более изображений. Требуется некоторое время, чтобы найти нужное вам изображение. Ввиду наличия данной проблемы мы решили создать плагин, который позволит вашим пользователям делиться конкретным изображением на ходу.

Данный плагин просматривает все изображения и оборачивает их в контейнер, который оборудован кнопкой Pin it. Таким образом, ваши посетители могут просто навести курсор мыши на нужное им изображение, и опубликовать его на свою доску в социальной сети. Очень простенький плагин.

Разработка Pinterest Pin It плагина на jQuery

Демо | Скачать
Внимание! У вас нет прав для просмотра скрытого текста.


HTML

Здесь нет никакого HTML-кода. Вам просто нужно включить файлы CSS и javascript в страницу:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.pinit.js"></script>
<script type="text/javascript">
$(function () {

$('img').pinit();

});
</script>

CSS

Вы можете оформить плагин посредством CSS. Мы создали 2 полупрозрачных изображения (белое и черное), поэтому вы можете переключаться между ними. CSS-код довольно прост, и большинство стилей предназначены для кнопок.

.pinit {
position:relative;
display:inline-block;

}

/* pin it overlay style */
.pinit .pinit-overlay {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:200;
display:none;
background:transparent url('../images/semi-white.png') repeat 0 0;
text-align:center;
}

/* button style, and center it */
.pinit .pinit-overlay a {
position:relative;
top:50%;
left:50%;
margin:-10px 0 0 -21px;
display:block;
width:43px;
height:20px;
background:transparent url('../images/pinit-button.png') no-repeat 0 0;
text-indent:-9999em;
}

.pinit .pinit-overlay a:hover {
background-positon: 0 -21px;
}

.pinit .pinit-overlay a:active {
background-position: 0 -42px;
}

javascript

В разделе javascript так же – ничего сложного. Мы создаем плагин, который оборачивает каждое изображение в span-элемент .pinit, и добавляет немного HTML, который позволит реализовать эффект наложения, оборудованный кнопкой. Кнопка Pin it ссылается на URL пользователя в социальной сети Pinterest:

http://pinterest.com/pin/create/bookmarklet/?media={MEDIA_URL}'&url={URL}&is_video={IS_VIDEO}&description={DESC}

(function($){

//Attach this new method to jQuery
$.fn.extend({

pinit: function(options) {

var defaults = {
wrap: '<span class="pinit"/>',
pageURL: document.URL
}

var options = $.extend(defaults, options);
var o = options;

//Iterate over the current set of matched elements
return this.each(function() {

var e = $(this),
pi_media = e.data('media') ? e.data('media') : e[0].src,
pi_url = o.pageURL,
pi_desc = e.attr('title') ? e.attr('title') : e.attr('alt'),
pi_isvideo = 'false';
bookmark = 'http://pinterest.com/pin/create/bookmarklet/?media=' + encodeURI(pi_media) + '&url=' + encodeURI(pi_url) + '&is_video=' + encodeURI(pi_isvideo) + '&description=' + encodeURI(pi_desc);

var eHeight = e.outerHeight();
e.wrap(o.wrap);
e.after('<span class="pinit-overlay" style="height: ' + eHeight + 'px"><a href="' + bookmark + '" class="pinit-button">Pin It</a></span>');

$('.pinit .pinit-button').on('click', function () {
window.open($(this).attr('href'), 'Pinterest', 'width=632,height=253,status=0,toolbar=0,menubar=0,location=1,scrollbars=1');
return false;
});

$('.pinit').mouseenter(function () {
$(this).children('.pinit-overlay').fadeIn(200);
}).mouseleave(function () {
$(this).children('.pinit-overlay').fadeOut(200);
});


});

}

});

})(jQuery);

В завершение

И на этом всё. Простой плагин, разработанный при помощи jQuery всего за полчаса. Мы протестировали его в разных браузерах (Chrome, Firefox, IE 7+), и он отлично показал себя во всех. Наслаждайтесь!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Design FactoRy   Прочитано (раз): 8184   |   Оставлено комментариев: 3
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 20 августа 2012 @ 02:35
Написал: kabua111 — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Разработайте пожалуйста такой же плагин, но под сайт: pinme.ru
Он всё-таки русский.
Комментарий #2: 26 сентября 2012 @ 01:08
Написал: Юджин — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Здравствуйте, скажите, а есть способы заставить работать сей скрипт только с определенными картинками, а не со всеми на сайте?
Комментарий #3: 25 апреля 2013 @ 15:53
Написал: aaron — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
а можно как-то сделать для своего сайта такую кнопку,только разместить её в браузере как закладка?
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Прочистка канализации Павловская слобода
Профессиональные машины для устранения засоров, прочистки труб. Гарантия
prochistca.ru
Окна Рехау официальный сайт
Пластиковые окна. Калькулятор стоимости окон
okna-rehau-ru.ru
Купить янтарные бусы в спб
Янтарные бусы оцениваем и покупаем по максимальной стоимости. Порядочность
yantarlavka.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930