Автор

20 04.2013
Выпадающие подписи для изображений

Выпадающие подписи для изображений


 

На сайтах, в основном, можно встретить вывод подписей для изображений, которые содержат различную информацию о материале. Зачастую эти, так называемые, подсказки весьма скучны и не привлекают взор пользователя к необходимой информации под изображением, но эту, пускай не такую уж и большую проблему, можно весьма просто решить с помощью маленького плагина 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;
}

 


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


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

16 04.2013
Выпадающие подписи для изображений

Несомненно меню это важнейший элемент на сайте, мы об этом уже не раз писали. Но меню зачастую веб-мастера создают достаточно простую навигацию, это не всегда правильный подход к организации материала на сайте. Если сайт сделан в минималистическом стиле, то ему не нужно объемное меню, или футуристический подход. Но для всех остальных сайтах можно по фантазировать, и создать нечто новое и уникальное. В данном уроке мы рассмотрим как создать объемное меню для сайта исключительно на CSS3.


28 12.2014
Выпадающие подписи для изображений

Все чаще пользователи просят нас навести примеры реализации ховер-эффектов. Эти эффекты позволяют не только скрыть, но и оживить необходимые элементы. В сегодняшнем уроке мы предоставим вашему вниманию замечательный набор прикольных ховер-эффектов, в работе которых используются современные CSS техники и 3D эффекты. Такие эффекты станут отличным дополнением для изображений или мультимедийных контентов на ресурсе. Данные ховеры должны Вас вдохновить на собственные, креативные решения для ваших сайтов.


15 03.2013
Выпадающие подписи для изображений

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

Галерея iLoad позволит вам удобно и эффектно показать фотографии вашим посетителям. Внешний вид галереи легко изменяется и вы быстро сможете настроить галерею под стиль своего сайта. iLoad позволяет показывать одиночные изображения, группировать изображения и создавать слайд шоу. Галерея поддерживает все современные браузеры, а так же InternetExplorer с 6 по 9 версию. iLoad не использует сторонние фреймворки, такие как jQuery, Prototype и так далее!


31 03.2013
Выпадающие подписи для изображений

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


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close