Выпадающие подписи для изображений
На сайтах, в основном, можно встретить вывод подписей для изображений, которые содержат различную информацию о материале. Зачастую эти, так называемые, подсказки весьма скучны и не привлекают взор пользователя к необходимой информации под изображением, но эту, пускай не такую уж и большую проблему, можно весьма просто решить с помощью маленького плагина jQuery. Плагин Drop Caption берет содержание атрибута изображения title и делает из него подпись, которая появляется только при наведении курсора мыши на картинку.
В случае отключения JavaScript подпись будет отображаться стандартными средствами браузера. Для начала мы рассмотрим как подключить этот плагин, а затем как его вызвать, для начала мы разместим код ниже между тегами head:
1 2 3 4 5 6 7 |
<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> |
Но в чем же преимущества данного плагина?
- Он занимает всего 3 KB
- Обратная совместимость
- Очень просто конфигурируется
- Использует стили CSS
- Один плагин используется для всех изображений
Также можно подключить плагин jQuery Easing и использовать его различные эффекты для вывода подписей. Вы можете выводить подписи для любого количества изображений на странице.
Опции используются при вызове скрипта:
1 2 3 4 5 6 7 8 9 |
$('.captionedimage').dropCaptions({ showSpeed: 2000, hideSpeed: 1000, showOpacity: 1, hideOpacity: 0, showEasing: 'easeOutElastic', hideEasing: 'easeInQuint', hideDelay: 2000 }); |
Последним этапом будет рассмотрение стилей CSS. Стиль подписей можно задавать с помощью класса .caption:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.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; } |
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Читайте также:
Опубликовал Cooper 06.04.2012 в 13:12, в категории Плагины. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |