—»     —»   Разработка простенького jQuery-плагина для Pinterest
  Раздел: Руководства   Нет комментариев  

Разработка простенького jQuery-плагина для Pinterest

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

Разработка простенького jQuery-плагина для Pinterest

Приступаем...

Сначала нам нужно взять шаблон jQuery-плагина.

(function( $ ) {
$.fn.pinterest = function(options) {

var settings = $.extend( {
}, options);

return this.each(function() {

});

};
})( jQuery );

Этот шаблон предоставляет нам возможность указать исходные значения конфигурации (настройки), а также позволяет извлечь преимущества из известной системы связки в jQuery (return this.each). Мы собираемся извлечь стандартные значения конфигурации, указав исходное изображение Pinterest, которое мы будем использовать. Его можно переписать при инициализации плагина за счет указания URL до желаемого изображения.

Исходное изображение

Разработка простенького jQuery-плагина для Pinterest

Собственное изображение

Разработка простенького jQuery-плагина для Pinterest

(function( $ ) {
$.fn.pinterest = function(options) {

var settings = $.extend( {
'button' : 'http://business.pinterest.com/assets/img/builder/builder_opt_1.png'
}, options);

return this.each(function() {

});

};
})( jQuery );

$(document).on('ready', function(){
$('img#share').pinterest({ button: 'pinterest-alt.png'});
});

Теперь, когда мы разобрались с базовым фреймворком, давайте начнем добавлять функционал. Нам нужно обновить функцию this.each, чтобы она инициализировала каждое изображение и давала нам кое-какие события. Мы решили сделать иконку поверх изображения, которым пользователь собирается поделиться. Чтобы сделать это, нам нужно обернуть изображение в span-элемент, который имеет абсолютное позиционирование. Затем нам нужно добавить сюда изображение для отправки, и расположить его абсолютно. Для этих целей мы используем нижний правый угол, но вы можете делать все по вашему усмотрению.

(function( $ ) {
$.fn.pinterest = function(options) {

var settings = $.extend( {
'button' : 'http://business.pinterest.com/assets/img/builder/builder_opt_1.png'
}, options);

return this.each(function() {
img = $(this);
img.wrap('<span class="pin-it" style="position: relative;" />');
img.parent('span.pin-it').append('<img src="' + settings.button + '" style="display: none;position: absolute; bottom: 20px; right: 20px;cursor: hand; cursor: pointer;" />');
});
};
})( jQuery );

$(document).on('ready', function(){
$('img#share').pinterest({ button: 'pinterest-alt.png'});
});

Теперь, когда нужные нам элементы на месте, мы можем начать привязывать события. Мы воспользуемся событиями hover и click. Когда пользователь наводит курсор на изображение, появляется кнопка “Share”.

(function( $ ) {
$.fn.pinterest = function(options) {

var settings = $.extend( {
'button' : 'http://business.pinterest.com/assets/img/builder/builder_opt_1.png'
}, options);

function on_click () {
};

function on_hover_in() {
$(this).siblings('img:first').show(500);
};

return this.each(function() {
img = $(this);
img.wrap('<span class="pin-it" style="position: relative;" />');
img.parent('span.pin-it').append('<img src="' + settings.button + '" style="display: none;position: absolute; bottom: 20px; right: 20px;cursor: hand; cursor: pointer;" />');
img.hover(on_hover_in);
img.siblings('img:first').on('click', on_click);
});

};
})( jQuery );

$(document).on('ready', function(){
$('img#share').pinterest({ button: 'pinterest-small.png'});
});

Событие on_click выглядит следующим образом:

function on_click () {
img = $(this).siblings('img:first');
description = img.attr('title');
url = document.location;
media = img.attr('src');

var pin_url = 'http://pinterest.com/pin/create/button/?url=' + encodeURIComponent( url ) +
'&media=' + encodeURIComponent( media ) +
'&description=' + encodeURIComponent( description );

window.open(pin_url, 'Pin - ' + description, 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');
$(this).hide(1000);
};

Оно извлекает изображение, которым мы хотим поделиться, а затем считывает его атрибуты title и scr. Оно также получает URL текущей страницы при помощи document.location. URL для обмена данными в Pinterest имеет 3 параметра, которые нам понадобятся:

* url – страница, с которой мы выполняем публикацию
* media – изображение, которым мы собираемся поделиться
* description – текст, который должен быть отображен на изображении

Когда мы генерируем ссылку для публикации, мы используем javascript-функцию encodeURIComponent, чтобы удостовериться в том, что значения были извлечены корректно.

Есть еще один параметр, который мы должны указать – будет ли scr url изображения относительным или нет. Если он будет относительным, нам нужно обновить url медиафайла.

function getUrl(src){
var url = document.location.toString();
var http = /^https?:\/\//i;
if (!http.test(src)) {
if(src[0] == '/'){
url = url.substring(0, url.lastIndexOf('/')) + src;
} else {
url = url.substring(0, url.lastIndexOf('/')) + '/' + src;
}
} else {
url = src;
}

return url;
};

Данная функция проверяет, начинается ли предоставленный URL src с http или нет. Если нет, то будет создан и возвращен в ответе абсолютный URL.

И на этом все! Теперь у вас есть полноценный jQuery-плагин для совершения публикаций в Pinterest. Ниже приведены исходные файлы HTML и javascript. Изображение, которое мы использовали в статье, - это «Три Музыканта» Пабло Пикассо.

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Creating a simple Pinterest! jQuery</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">

(function( $ ) {
$.fn.pinterest = function(options) {

var settings = $.extend( {
'button' : 'http://business.pinterest.com/assets/img/builder/builder_opt_1.png'
}, options);

function getUrl(src){
var url = document.location.toString();
var http = /^https?:\/\//i;
if (!http.test(src)) {
if(src[0] == '/'){
url = url.substring(0, url.lastIndexOf('/')) + src;
} else {
url = url.substring(0, url.lastIndexOf('/')) + '/' + src;
}
} else {
url = src;
}

return url;
};

function on_click () {
img = $(this).siblings('img:first');
description = img.attr('title');
url = document.location;
media = getUrl( img.attr('src') );

var pin_url = 'http://pinterest.com/pin/create/button/?url=' + url +
'&media=' + media +
'&description=' + description;

window.open(pin_url, 'Pin - ' + description, 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');
$(this).hide(1000);
};

function on_hover_in() {
$(this).siblings('img:first').show(500);
};

return this.each(function() {
img = $(this);
img.wrap('<span class="pin-it" style="position: relative;" />');
img.parent('span.pin-it').append('<img src="' + settings.button + '" style="display: none;position: absolute; bottom: 20px; right: 20px;cursor: hand; cursor: pointer;" />');
img.hover(on_hover_in);
img.siblings('img:first').on('click', on_click);
});

};
})( jQuery );
</script>
</head>
<body>
<div id="page">
<!-- [banner] -->
<header id="banner">
<hgroup>
<h1>Creating a simple Pinterest! jQuery</h1>
</hgroup>
</header>
<!-- [content] -->
<section id="content">
<img id="share" src="picasso.jpg" title="Three Musicians" />
</section>

<script>
$(document).on('ready', function(){
$('img#share').pinterest({ button: 'pinterest-small.png'});
});
</script>
</div>
<!-- [/page] -->
</body>
</html>

Демо | Скачать исходные коды
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, Pinterest
Опубликовал Design FactoRy   Прочитано (раз): 12246   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

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

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


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Французский коньяк цена
У нас доступные цены. Звоните
napitkimira.com
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
ОЭБиПК
ОЭБиПК
advokat-chernov.ru
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031