Каркас робимо в HTML
Насамперед створимо невпорядкований список, який і стане фундаментом нашої галереї.
Code
<ul class="gallery">
<li>
<a href="#" class="thumb"><span><img src="image.gif" alt="" /></span></a>
<h2><a href="#">Имя изображения</a></h2>
</li>
</ul>
Зауважте, що кожне зображення укладено в теги, які необхідні для відображення картинки в стані за замовчуванням. Подивіться на малюнок знизу і вам відразу стане все зрозуміло.
Каскадна таблиця стилів
Властивості будемо ставити, як і при створенні звичайної галереї, єдина особливість нашого коду в тому, що ми розмістили наші зображення в теги, необхідні для застосування ефекту тільки до обраного зображенню.
Code
ul.gallery {
width: 708px; /*--Регулируем ширину в соответствии со сценарием--*/
list-style: none;
margin: 0; padding: 0;
}
ul.gallery li {
float: left;
margin: 10px; padding: 0;
text-align: center;
border: 1px solid #ccc;
-moz-border-radius: 3px; /*--CSS3 закругленные углы--*/
-khtml-border-radius: 3px; /*--CSS3 закругленные углы--*/
-webkit-border-radius: 3px; /*--CSS3 закругленные углы--*/
display: inline; /*--Настройка специально для IE6--*/
}
ul.gallery li a.thumb {
width: 204px; /*--Ширина изображения--*/
height: 182px; /*--Высота изображения--*/
padding: 5px;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
ul.gallery li span { /*--Выделяем изображение для применения эффекта--*/
width: 204px;
height: 182px;
overflow: hidden;
display: block;
}
ul.gallery li a.thumb:hover {
background: #333; /*--Hover эффект для браузеров с отключенным js--*/
}
ul.gallery li h2 {
font-size: 1em;
font-weight: normal;
text-transform: uppercase;
margin: 0; padding: 10px;
background: #f0f0f0;
border-top: 1px solid #fff; /*--эффект легкого заострения--*/
}
ul.gallery li a {text-decoration: none; color: #777; display: block;}
Анімація за допомогою jQuery
Спершу підключаємо бібліотеку jQuery: ви можете або завантажити цей файл з сайту jQuery, або скористатися послугами Google.
Code
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
У коді скрипта є всі необхідні коментарі:
Code
<script>
jQuery
$(document).ready(function() {
$("ul.gallery li").hover(function() { //при наведении курсора...
var thumbOver = $(this).find("img").attr("src"); //получает url изображения и
приписывает к нему свойство 'thumbOver'
//Прикрепляет фоновому изображению (помеченному thumbOver) тег <a> - И задает
позицию заднего плана
$(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat
center bottom'});
//анимирует изображение, при помощи значения прозрачности равное 0 (в итоге
изображение исчезает)
$(this).find("span").stop().fadeTo('normal', 0 , function() {
$(this).hide() //прячет изображение
});
} , function() { //при отведении курсора...
//возвращает цветное изображение
$(this).find("span").stop().fadeTo('normal', 1).show();
});
});
</script>
