Как вы вероятно уже заметили, в наши дни кнопка Pin it может быть увидена практически на любом веб-сайте. Социальная сеть также выпустила специальный букмарклет, который сканирует страницу на наличие изображений и позволяет вам поделиться ими на вашей доске в Pinterest. Тем не менее, иногда это бывает очень неудобно. Например, когда на странице размещено 30 и более изображений. Требуется некоторое время, чтобы найти нужное вам изображение. Ввиду наличия данной проблемы мы решили создать плагин, который позволит вашим пользователям делиться конкретным изображением на ходу.
Данный плагин просматривает все изображения и оборачивает их в контейнер, который оборудован кнопкой Pin it. Таким образом, ваши посетители могут просто навести курсор мыши на нужное им изображение, и опубликовать его на свою доску в социальной сети. Очень простенький плагин.
Демо | Скачать
Внимание! У вас нет прав для просмотра скрытого текста.
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+), и он отлично показал себя во всех. Наслаждайтесь!
