—»     —»   Руководство по применению тэгов к изображениям при помощи jQuery и CSS
  Раздел: Обработка изображений   Нет комментариев  

Руководство по применению тэгов к изображениям при помощи jQuery и CSS



Наверняка всем известно, что картинка заменяет тысячу слов. Картинки – это отличный способ мгновенно привлечь внимание. Но иногда нам нужно выделить определенные фрагменты изображения тэгом или ссылкой, чтобы предоставить пользователям дополнительную информацию. Популярные социальные сети вроде Facebook или Google+ используют тэги (метки) на изображениях, чтобы идентифицировать людей или места, присутствующие на этих изображениях.

Наше сегодняшнее руководство посвящено разработке простой системы выставления тэгов (меток) на изображения при помощи jQuery и CSS. Давайте приступим.

Руководство по применению тэгов к изображениям при помощи jQuery и CSS

Демо и необходимые файлы

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


Создание первоначального шаблона

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

<html>
<head>
<title>Image Tagging with jQuery and PHP</title>
<link href="jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>

</head>
<body>
<div id='main_panel'>

<div style='margin: auto;
text-align: center;
width: 600px;'>
<div id='image_panel' >
<img src='tagging.jpg' id='imageMap' />
<div id='mapper' ><img src='save.png' onclick='openDialog()' /></div>

<div id="planetmap">

</div>
<div id='form_panel'>
<div class='row'>
<div class='label'>Title</div><div class='field'><input type='text' id='title' /></div>
</div>
<div class='row'>
<div class='label'></div>
<div class='field'>
<input type='button' value='Add Tag' onclick='addTag()' />

</div>
</div>

</div>
</div>

</div>
<div style="background: none repeat scroll 0 0 #C7C7C8;
border: 1px solid #AEAEAE;
clear: both;
margin: 20px auto;
padding: 20px 0;
text-align: center;
width: 600px;">
<input type="button" value="Show Tags" onclick="showTags()" />
<input type="button" value="Hide Tags" onclick="hideTags()" />
</div>
</div>

</html>

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

* сначала мы включаем файлы CSS и JS, необходимые для демо. Мы использовали библиотеку jQuery UI.
* затем у нас идет #image_panel, где есть все компоненты, необходимые для применения тэгов.

<div id='image_panel' >
<img src='tagging.jpg' id='imageMap' />
<div id='mapper' ><img src='save.png' onclick='openDialog()' /></div>

<div id="planetmap">

</div>
<div id='form_panel'>
<div class='row'>
<div class='label'>Title</div><div class='field'><input type='text' id='title' /></div>
</div>
<div class='row'>
<div class='label'></div>
<div class='field'>
<input type='button' value='Add Tag' onclick='addTag()' />

</div>
</div>

</div>
</div>

* Сначала у нас идет изображение, которое будет оформлено тэгом с ID imageMap
* Затем у нас идет элемент под названием #mapper, который изначально будет скрыт. Он используется для определения области, в рамках которой можно будет применять тэги.
* #image_panel позиционирована относительно main_panel, и #mapper обозначен абсолютным позиционированием. Причем, у mapper значение параметра z-index должно быть выше, так как этот элемент должен отображаться поверх изображения.
* Затем у нас идет компонент под названием planetmap. Он используется для того, чтобы удерживать разделы, к которым применены тэги. Когда тэг создается на основном изображении, также создается небольшой div-элемент и прикрепляется к разделу planetmap.
* Дальше вы можете видеть #form_panel. Он используется для создания заголовка тэгов. Когда тэг создается, будет появляться окошко и запрашивать название тэга. Как только имя будет введено, окошко будет скрыто.

Теперь мы узнали, как структурирован наш шаблон. Стили, использованные в демо, не включены в вышеприведенный код. Так что, при чтении руководства не забывайте поглядывать в файлы проекта, чтобы лучше понимать, что к чему.

Генерируем окно тэгов

Нам необходимо загружать окно тэгов, когда пользователь кликает по изображению. Если вы еще этого не сделали, то сейчас откройте демо, и кликните в любую точку изображения. Давайте посмотрим, как мы можем это реализовать посредством кода. В файлах проекта посмотрите на $(“#imageMap”).click, а дальше мы все объясним по порядку.

Руководство по применению тэгов к изображениям при помощи jQuery и CSS

var image_left = $(this).offset().left;
var click_left = e.pageX;
var left_distance = click_left - image_left;

var image_top = $(this).offset().top;
var click_top = e.pageY;
var top_distance = click_top - image_top;

* offset берет координаты изображения относительно документа. Это вызывается событием mouseclick. Таким образом event.pageX даст вам абсолютно координату x на изображении.
* затем мы при помощи click_left – image_left получаем текущую дистанцию до области, по которой мы кликнули, от начала изображения.
* Мы применяем тот же метод для того, чтобы получить расстояние от верхней границы до области, по которой был произведен клик.

var mapper_width = $('#mapper').width();
var imagemap_width = $('#imageMap').width();

var mapper_height = $('#mapper').height();
var imagemap_height = $('#imageMap').height();

Затем мы высчитываем ширину и высоту mapper (окно для применения тэгов) и текущего изображения. Теперь у нас есть все необходимые параметры для того, чтобы начать загружать окно тэгов. Проблема в том, что это окно не должно выходить за пределы контейнера изображения, и поэтому нам необходимо произвести некоторую валидацию при загрузке окна тэгов.

Руководство по применению тэгов к изображениям при помощи jQuery и CSS

if((top_distance + mapper_height > imagemap_height) && (left_distance + mapper_width > imagemap_width)){
$('#mapper').css("left", (click_left - mapper_width - image_left ))
.css("top",(click_top - mapper_height - image_top ))
.css("width","100px")
.css("height","100px")
.show();
}

* В вышеприведенном изображении окно с тэгами превышает изображение сверху и слева. Мы предотвращаем это при помощи валидации в выражении if.
* Затем мы задаем заново вычисленные параметры top и left, и отображаем окно с тэгами.

Руководство по применению тэгов к изображениям при помощи jQuery и CSS

else if(left_distance + mapper_width > imagemap_width){

$('#mapper').css("left", (click_left - mapper_width - image_left ))
.css("top",top_distance)
.css("width","100px")
.css("height","100px")
.show();

}

* Вышеприведенное окно с тэгами превышает размеры изображения по левой стороне. Мы предотвращаем это при помощи валидации в выражении if.
* Затем мы задаем заново вычисленный параметр left, и отображаем окно с тэгами.

Руководство по применению тэгов к изображениям при помощи jQuery и CSS

else if(top_distance + mapper_height > imagemap_height){
$('#mapper').css("left", left_distance)
.css("top",(click_top - mapper_height - image_top ))
.css("width","100px")
.css("height","100px")
.show();
}

* Вышеприведенное окно с тэгами превышает размеры изображения по верхней стороне. Мы предотвращаем это при помощи валидации в выражении if.
* Затем мы задаем заново вычисленный параметр top, и отображаем окно с тэгами.

Руководство по применению тэгов к изображениям при помощи jQuery и CSS

else{

$('#mapper').css("left",left_distance)
.css("top",top_distance)
.css("width","100px")
.css("height","100px")
.show();
}

* В вышеприведенном изображении окно расположено корректно. Так что, мы отображаем окно с текущей позицией.

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

$("#mapper").resizable({ containment: "parent" });
$("#mapper").draggable({ containment: "parent" });

Сохраняем тэги на изображении

Вы можете видеть иконку сохранения на окне тэгов. Переместите окно с тэгами и задайте нужный его размер в том месте, где вы хотите сохранить тэг. Затем кликайте по кнопке сохранения, которая вызовет функцию openDialog, как показано ниже.

var openDialog = function(){
$("#form_panel").fadeIn("slow");
};

Форма используется для сохранения параметров тэга, которые позже будут отображаться так, как показано ниже.

Руководство по применению тэгов к изображениям при помощи jQuery и CSS

Вы можете вписать заголовок тэга и нажать по кнопке «add». Тэг будет сохранен и немедленно скрыт. Ниже представлен код, необходимый для функционала добавления тэга.

var addTag = function(){
var position = $('#mapper').position();

var pos_x = position.left;
var pos_y = position.top;
var pos_width = $('#mapper').width();
var pos_height = $('#mapper').height();

$('#planetmap').append('<div class="tagged" style="width:'+pos_width+';height:'+
pos_height+';left:'+pos_x+';top:'+pos_y+';" ><div class="tagged_box" style="width:'+pos_width+';height:'+
pos_height+';display:none;" ></div><div class="tagged_title" style="top:'+(pos_height+5)+';display:none;" >'+
$("#title").val()+'</div></div>');

$("#mapper").hide();
$("#title").val('');
$("#form_panel").hide();

};

* Сначала мы получаем позиции left и top для окна с тэгами, а также ширину и высоту mapper.
* Все тэги будут храниться в div’е #planetmap. Так что мы добавляем только что созданный тэг в div #planetmap с заголовков.
* Затем мы скрываем окно с тэгами и перезагружаем детали формы.

Посредством данной процедуры вы можете создавать сколько угодно тэгов. Теперь нам нужно показать скрытые тэги, когда курсор мыши попадает на область с тэгами. Давайте рассмотрим следующий код.

$(".tagged").live("mouseover",function(){
if($(this).find(".openDialog").length == 0){
$(this).find(".tagged_box").css("display","block");
$(this).css("border","5px solid #EEE");

$(this).find(".tagged_title").css("display","block");
}

});

$(".tagged").live("mouseout",function(){
if($(this).find(".openDialog").length == 0){
$(this).find(".tagged_box").css("display","none");
$(this).css("border","none");
$(this).find(".tagged_title").css("display","none");
}

});

* Каждый тэг имеет класс под названием tagged. Поэтому мы осуществляем поиск добавленных тэгов внутри изображения.
* При событии mouseover мы проверяем, существует ли класс openDialog в области тэгов. Данный класс доступен в режиме редактирования, и мы расскажем о нем позже.
* Если его нет в режиме редактирования, то мы отображаем заголовок тэга и блок с тэгами при помощи CSS-атрибута display:block.
* Мы также добавили границу тэгу, чтобы его можно было легко увидеть.
* При событии mouseout мы скрываем все тэги.
* Так как тэги создаются динамически, нам нужно добавить jQuery-события с помощью события live.

На данном этапе мы завершили разработку тэгов. Иногда нам нужно отредактировать существующие тэги и даже переместить их.

Редактируем позиции тэгов

Тэг будет отображен, как только вы наведете на него курсор мыши. Если кликнуть по тэгу, то вам будет показано окно тэгов с кнопками сохранения и удаления. Давайте взглянем на код.

Руководство по применению тэгов к изображениям при помощи jQuery и CSS

$(".tagged").live("click",function(){
$(this).find(".tagged_box").html("<img src='del.png' class='openDialog' value='Delete' onclick='deleteTag(this)' />n
<img src='save.png' onclick='editTag(this);' value='Save' />");

var img_scope_top = $("#imageMap").offset().top + $("#imageMap").height() - $(this).find(".tagged_box").height();
var img_scope_left = $("#imageMap").offset().left + $("#imageMap").width() - $(this).find(".tagged_box").width();

$(this).draggable({ containment:[$("#imageMap").offset().left,$("#imageMap").offset().top,img_scope_left,img_scope_top] });

});

var editTag = function(obj){

$(obj).parent().parent().draggable( 'disable' );
$(obj).parent().parent().removeAttr( 'class' );
$(obj).parent().parent().addClass( 'tagged' );
$(obj).parent().parent().css("border","none");
$(obj).parent().css("display","none");
$(obj).parent().parent().find(".tagged_title").css("display","none");
$(obj).parent().html('');

}

var deleteTag = function(obj){
$(obj).parent().parent().remove();
};

* Кнопки удаления и сохранения отображаются тогда, когда вы кликаете по существующему тэгу, примененному к картинке. Теперь тэг находится в режиме редактирования.
* Вы можете перемещать тэг и назначать его заново. В коде переменные img_scope_top и img_scope_left используются для идентификации области, в пределах которой вы можете переместить тэг.
* Затем мы преобразуем тэг в перемещаемый по высчитанной области.
* После того как вы закончили с перемещением тэга, переместите курсор мыши на кнопку сохранения и кликните. В данном случае будет вызвана функция editTag.
* Сначала мы отключаем возможность перемещение, когда по кнопке редактирования производится нажатие.
* Затем мы скрываем окно с тэгами после сохранения, как мы это делали раньше.
* Вы так же можете нажать кнопку удаления, чтобы убрать существующий тэг с изображения.

На этом мы и закончили весь процесс расстановки тэгов на изображении. В режиме по умолчанию тэги не отображаются. Так что, вы можете воспользоваться следующим кодом, если захотите скрыть все тэги, примененные к изображению.

Показываем все тэги

var showTags = function(){
$(".tagged_box").css("display","block");
$(".tagged").css("border","5px solid #EEE");
$(".tagged_title").css("display","block");
};

Скрываем все тэги

var hideTags = function(){
$(".tagged_box").css("display","none");
$(".tagged").css("border","none");
$(".tagged_title").css("display","none");
};

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

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

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

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


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31