Онлайн-генератор веб-цветов
Онлайн-подбор оптимальных веб-цветов для сайта
Онлайн-редактор HTML
Цветовой онлайн-калькулятор
Онлайн-калькулятор
Онлайн-рисовалка PencilMadness
  • Web
  • Images
  • News
  • Videos
  пятница, марта 23, 2012  

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

За основу идеи взят плагин jQuery Drop caption, с помощью которого можно выводить содержимое title у изображений в виде красочной, плавно всплывающей под курсором, подсказки с неким поясняющим картинку текстом.

Данное "украшательство" состоит из двух скриптов: собственно, самого скрипта dropcaptions.js, который реализует вывод всплывающей подсказки у изображений, и скрипта easing.1.3.js, позволяющий настроить и осуществить эту подсказку красиво. При желании, можете перезалить их на собственные файловые хостинги.

Плагин jQuery для красочных всплывающих подсказок у изображений


Живое демо


Плагин использует библиотеку jQuery, если у вас в шаблоне она не прописана ранее, добавьте к уже указанным скриптам и ее:
<script src='http://jqueryjs.googlecode.com/files/jquery-1.4.2.min.js' type='text/javascript'/>

Установка jQuery Drop caption для всплывающей подписи у изображений в блог от Blogger.


Размещение в шаблоне самого плагина.


Проследуйте Шаблон > Изменить HTML. В поле редактирования шаблона найдите строку </head> и прямо перед нею пропишите скрипты, о которых шла речь выше, и скрипт, запускающий плагин jQuery Drop caption  для нужных изображений с необходимыми настройками. Общий код, который требуется добавить:
<script src='http://bloggarolla.googlecode.com/files/jquery.dropcaptions.js' type='text/javascript'></script>
<script src='http://bloggarolla.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'></script>
<script type="text/javascript">
$(function(){
 $('.tooltipimage').dropCaptions();
 $('.imagetooltip').dropCaptions({
  showSpeed: 2000,
  hideSpeed: 1000,
  showOpacity: 1,
  hideOpacity: 0,
  showEasing: 'easeOutElastic',
  hideEasing: 'easeInQuint',
  hideDelay: 2000
 });
});
</script>
В данном варианте учтены два эффекта всплывающих подсказок для изображений с прописанными настройками, однако вы можете отрегулировать скрипт по собственному желанию.

Настройки скрипта:
showSpeed - длительность появления подсказки при наведении курсора мыши на изображение в миллисекундах, по умолчанию - 500;
hideSpeed - длительность исчезновения подсказки в миллисекундах, по умолчанию - 500;
showOpacity - прозрачность всплывающей подсказки (0-1), по умолчанию - .85;
hideOpacity - прозрачность всплывающей подсказки у изображений при исчезновении  (0-1), по умолчанию - 0;
showEasing - эффект, который используется при выводе всплывающей подсказки, по умолчанию - ‘swing’;
hideEasing - эффект, который используется при исчезновении всплывающей подсказки у изображений, по умолчанию - ‘swing’;
showDelay - задержка перед выводом подсказки при наведении курсора мыши на  изображение в миллисекундах, по умолчанию - 0;
hideDelay - задержка перед исчезновением подсказки после убирания курсора с изображения в миллисекундах, по умолчанию - 0.
Данные настройки нужно изменять либо добавлять непосредственно на этом участке общего кода:
<script type="text/javascript">
$(function(){
 $('.tooltipimage').dropCaptions();
 $('.imagetooltip').dropCaptions({
  showSpeed: 2000,
  hideSpeed: 1000,
  showOpacity: 1,
  hideOpacity: 0,
  showEasing: 'easeOutElastic',
  hideEasing: 'easeInQuint',
  hideDelay: 2000
 });
});
</script>

Размещение в шаблоне стилей CSS.


Остается закрепить за всплывающей подписью у изображений стили CSS, дабы придать ей требуемый лоск.

По-прежнему в поле редактирования шаблона найдите уже строку ]]></b:skin> и перед нею впишите код:
.caption {
 background: #000;
 border-right: 1px solid #fff;
 border-bottom: 1px solid #fff;
 border-left: 1px solid #fff;
 border-top: 1px solid #fff;
 font-family: Georgia;
 font-size: 11px;
 padding: 4px;
 -moz-border-radius-bottomright: 7px;
 -moz-border-radius-bottomleft: 7px;
 -webkit-border-bottom-right-radius: 7px;
 -webkit-border-bottom-left-radius: 7px;
 color: #eee;
Повторюсь, что вывод этой замечательной всплывающей подсказки полностью настроен и готов к использованию, но, одновременно с этим, также укажу и некоторые значения стилей CSS, чтобы пользователь смог заменить их на собственные при надобности.
Для подбора нужного цвета используйте графический онлайн-редактор.

Значения стилей CSS:
background: #000 - цвет всплывающей подписи;
border: 1px solid #fff - цвет обрамляющей рамки у всплывающей подписи;
font-family: Georgia - шрифт текста подсказки;
font-size: 11px - размер текста у подсказки;
color: #eee - цвет текста;
border-radius: 7px - скругление углов у всплывающей подсказки в пикселях.
Разместив скрипты и значения CSS, сохраните шаблон.

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

Если вам понравился первый вариант всплывающей подписи у изображения, тогда добавляйте к публикуемым изображениям класс imagetooltip. Общий код с ссылкой изображения будет выглядеть так:
<img alt="" class="imagetooltip" src="ссылка_на_изображение" title="Поясняющий изображение текст." />
Если понравился второй эффект, тогда используйте класс tooltipimage. Код в таком случае выглядит следующим образом:
<img alt="" class="tooltipimage" src="ссылка_на_изображение" title="Поясняющий изображение текст." /> 
На этом я умолкаю. Заинтересованному эффектом читателю остается применить его непосредственно у себя в блоге.



Понравилась статья? Поделись ею с друзьями!

Не забудь подписаться на обновления блога:


Вы можете оставить свой отзыв через блок комментариев Вконтакте. При отсутствии профиля в этой социальной сети, воспользуйтесь удобной формой Disqus ниже.