Плагин jQuery - Drop caption

Плагин Drop Caption берет содержание атрибута изображения title и делает из него подпись, которая появляется только при наведении курсора мыши на картинку. В случае отключения JavaScript подпись будет отображаться стандартными средствами браузера.

 

В чем преимущества плагина?

  • Он занимает всего 3 KB
  • Обратная совместимость
  • Очень просто конфигурируется
  • Использует стили CSS
  • Один плагин используется для всех изображений

Как использовать

Нужно подключить к странице jQuery и плагин. А затем запустить скрипт для нужных изображений:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.dropcaptions.js"></script>
<script type="text/javascript">
$(function(){
	$('.captionedimage').dropCaptions();
});
</script>

Также можно подключить плагин jQuery Easing и использовать его различные эффекты для вывода подписей.

Вы можете выводить подписи для любого количества изображений на странице. 

 

Опции

Следующие опции доступны для конфигурирования плагина:

  • showSpeed – длительность вывода (в миллисекундах) подписи при наведении курсора мыши на изображение. По умолчанию: 500.
  • hideSpeed – длительность скрытия (в миллисекундах) подписи, когда курсор мыши покидает изображение. По умолчанию: 500.
  • showOpacity – Непрозрачность подписи, когда она полностью выведена (0-1). По умолчанию:   .85.
  • hideOpacity – Непрозрачность подписи в завершении процесса скрытия  (0-1). Default:   0.
  • showEasing – Эффект, который используется при выводе подписи. По умолчанию:  ‘swing’.
  • hideEasing – Эффект, который используется при скрытии подписи. По умолчанию:  ‘swing’.
  • showDelay – Задержка (в миллисекундах) перед выводом подписи при наведении курсора мыши на  изображение. По умолчанию: 0.
  • hideDelay – Задержка (в миллисекундах) перед скрытием подписи после того, как курсор мыши покинет изображение. По умолчанию: 0.

Опции используются при вызове скрипта:

$('.captionedimage').dropCaptions({
showSpeed: 2000,
 hideSpeed: 1000,
 showOpacity: 1,
 hideOpacity: 0,
 showEasing: 'easeOutElastic',
 hideEasing: 'easeInQuint',
 hideDelay: 2000
});

 

Стиль подписей

Стиль подписей можно задавать с помощью класса .caption:

.caption {
 background: #333;
 border-right: 1px solid #666;
 border-bottom: 1px solid #666;
 border-left: 1px solid #666;
 border-top: 1px solid #666;
 font-family: Verdana;
 font-size: 11px;
 padding: 4px;
 -moz-border-radius-bottomright: 6px;
 -moz-border-radius-bottomleft: 6px;
 -webkit-border-bottom-right-radius: 6px;
 -webkit-border-bottom-left-radius: 6px;
 color: #eee;
}

Демонстрация

 

 

Авторизоваться и Скачать

5 последних добавленных файлов в рубрике"Скрипты"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 31 Января 2012 01:06
    sigrosigro
    в закладки
  • 31 Января 2012 20:28
    AM0P
    Интересно
  • 31 Января 2012 22:26
    Дзирт_До_Урден
    Круто. Кто проверял в других браузерах ??
  • 2 Февраля 2012 14:18
    roma94
    Я проверял на Opera 11.60 все отлично отличный урок
  • 2 Февраля 2012 18:00
    Dimack
    Отлично работает и в Firefox 10.0 и в Safari 5, также в Chrome.
  • 25 Февраля 2012 11:47
    Vova123
    не работает
  • 5 Сентября 2012 16:47
    alexvitu
    у меня тоже не работает, подскажите что делаю не так
  • 9 Декабря 2012 12:21
    loginnnnn
    Классный скрипт
^ Наверх ^