» » >

jQuery Capty - A Caption Plugin
·
22.09.2013, 15:19

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

Шаг-1 JS:

Следует установить на страницу сайта, после тега body, следующие скрипты

JS

<script type="text/javascript" src="http://ucoz-helper.ucoz.com/js_jquery/capty.min.js"></script>
  <script type="text/javascript">
  $(function() {

  $('.default').capty();

  $('.animation').capty({
  animation: 'fade',
  speed: 400
  });

  $('.fixed').capty({
  animation: 'fixed'
  });

  $('.content').capty({
  height: 46,
  opacity: .6
  });

  });
  </script>

Как мы можем заметить, во втором скрипте установлены нужные эффекты, в которых изначально был указан id но я решил заменить его на class, так как многие пользователи, могут использовать один и тот же эффект для нескольких изображений.

Шаг-2 Html:

Теперь мы устанавливаем наше изображение, в котором прописываем класс с нужным эффектом, который прописан в скрипте выше:

HTML-Code

<img class="default" src="1.jpg" alt="Nivo Slider для uCoz" width="310" height="100"/>
Шаг-3 CSS:

И устанавливаем css стили, которые отвечают за оформление появляющийся тёмной полосы с низу изображения, в которой находиться тест атрибута alt:

CSS-Code

div.capty-caption {
  background-color: #000;
  color: #FFF;
  font: bold 11px verdana;
  padding-left: 10px;
  padding-top: 7px;
  text-shadow: 1px 1px 0 #222;
}

div.capty-caption a {
  color: #318DAD;
  font: bold 11px verdana;
  text-decoration: none;
  text-shadow: none;
}
Примечание:

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

Категория: jQuery и JS | Добавил: tashkent97
Просмотров: 439 | Загрузок: 274 | Источник: center-dm.ru | Рейтинг: 5.0/1
Всего комментариев: 0
dth="100%" cellspacing="1" cellpadding="2" class="commTable">
Имя *: Email:
Яндекс.Метрика Яндекс цитирования<