Оформляем картинки с помощью jQuery

Многие блогеры знакомы с красивым оформлением рекомендуемых записей с помощью плагина Featured Content Gallery.

Мы имеем картинку, а на ее фоне всплывающая полупрозрачная полоса с заголовком и анонсом статьи, при этом анонсы сменяют друг друга. (Кстати эффекты могут быть самыми разными, например, на сайте www.zakaz-buketa.ru реализована карусель с затуханием и увеличением картинки при наведении мышки. Словом, возможности jQuery действительно обширны). Расскажу, как создать эффект всплывающей полупрозрачной полосы с текстом на любом изображении в шаблоне или статье. Всплывающая полоса с текстом будет появляться при наведении мышкой.

Нам понадобиться плагин jQuery Hover Image Text (не путать с плагином WordPress).

Сразу его изменяем, чтобы наша страничка прошла валидацию html (заменяем знак p на span). Исправленную версию можно скачать тут.

Файл jquery.hoverimagetext.js копируем в папку с шаблоном.

Открываем файл header.php и добавляем перед тегом </head> следующий код:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/jquery.hoverimagetext.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/* options can be found within the plugin js */
$('.imageLibrary a').HoverImageText();
});
</script>

Далее в самом тексте мы вставляем изображения в таком виде:

<ul class="imageLibrary">
<li><a href="http://site.ru/1"><span><strong>img 1</strong><br />Здесь ваш текст</span><img height="124" src="http://site.ru/images/pic1.jpg" width="254" alt="Название картинки" /></a></li>
<li><a href="http://site.ru/2"><span><strong>img 2</strong><br />Здесь ваш текст</span><img height="124" src="http://site.ru/images/pic2.jpg" width="254" alt="Название картинки" /></a></li>
<li><a href="http://site.ru/3"><span><strong>img 3</strong><br />Здесь ваш текст</span><img height="124" src="http://site.ru/images/pic3.jpg" width="254" alt="Название картинки" /></a></li>
</ul>
    

Добавляем стили в файл style.css

.imageLibrary {
display: inline;
clear: none;
}

.imageLibrary li {
list-style-type: none;
display: inline;
clear: none;
}
.imageLibrary span {
 position: absolute;
 margin-left: 8px;
 margin-top: 91px;
 z-index: 2;
 background-color: black;
 color: #ffffff;
 width: 254px;
 text-align: center;
 opacity: .8;
 display: none;
 clear: none;
 font-size: 11px;
 line-height: 18px;
 padding: 5px 0px 5px 0px;
}

.imageLibrary p strong {
 font-size: 14px;
}
.imageLibrary img {
z-index:1;
width: 254px;
height: 124px;
}
    

В стилях вы можете задать свою высоту и ширину картинок, соответственно изменится отступ от верха картинки до начала полупрозрачной полосы: margin-top: 91px;

В итоге при наведении на картинку получаем всплывающую полупрозрачную полосу с описанием.