На сайтах, в основном, можно встретить вывод подписей для изображений, которые содержат различную информацию о материале. Зачастую эти, так называемые, подсказки весьма скучны и не привлекают взор пользователя к необходимой информации под изображением, но эту, пускай не такую уж и большую проблему, можно весьма просто решить с помощью маленького плагина jQuery. Плагин Drop Caption берет содержание атрибута изображения title и делает из него подпись, которая появляется только при наведении курсора мыши на картинку.
В случае отключения JavaScript подпись будет отображаться стандартными средствами браузера. Для начала мы рассмотрим как подключить этот плагин, а затем как его вызвать, для начала мы разместим код ниже между тегами head:
<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 и использовать его различные эффекты для вывода подписей. Вы можете выводить подписи для любого количества изображений на странице.
Опции используются при вызове скрипта:
$('.captionedimage').dropCaptions({
showSpeed: 2000,
hideSpeed: 1000,
showOpacity: 1,
hideOpacity: 0,
showEasing: 'easeOutElastic',
hideEasing: 'easeInQuint',
hideDelay: 2000
});
Последним этапом будет рассмотрение стилей CSS. Стиль подписей можно задавать с помощью класса .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;
}
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
