В данном уроке мы разберемся, как создать отличную галерею изображений с интересным анимационным эффектом с помощью библиотек Raphael и jQuery.
Библиотека
Raphael является отличным инструментом для работы с векторной графикой. В нашем уроке мы будет использовать лишь небольшую часть ее потенциальных возможностей. По утверждениям разработчиков Raphael поддерживает браузеры: Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ и Internet Explorer 6.0+.
Итак, приступим.
Создаем три файла: index.html, css/default.css, js/init.js и загружаем библиотеку Raphael. Затем включаем все необходимые файлы в разделе head:
<link href="css/default.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/raphael.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>
index.html
Разметка HTML для галереи достаточно проста.
<div class="gallery">
<ul class="reset">
<li><img src="img/img1.jpg" alt="" /></li>
<li><img src="img/img2.jpg" alt="" /></li>
<li><img src="img/img3.jpg" alt="" /></li>
<li><img src="img/img4.jpg" alt="" /></li>
<li><img src="img/img5.jpg" alt="" /></li>
<li><img src="img/img6.jpg" alt="" /></li>
<li><img src="img/img7.jpg" alt="" /></li>
<li><img src="img/img8.jpg" alt="" /></li>
</ul>
</div>
Мы создаем основной контейнер 'gallery', который содержит неупорядоченный список изображений. Все изображения должны быть одного размера. В нашем примере используется размер 400px х 400px.
default.css
ul.reset,
ul.reset li {
display:block;
list-style:none;
padding:0;
margin:0;
}
.gallery ul li {
width:200px; /* Половина ширины изображения */
height:200px; /* Половина высоты изображения */
margin:0 10px 10px 0;
float:left;
position:relative;
}
.holder {
position:absolute;
top:0;
left:0;
margin:-100px 0 0 -100px; /* margin-left: половина ширины элемента 'li' width, а margin-top: половина высоты элемента 'li' */
}
Стили также содержат типовые и простые правила.
init.js
$(function(){
var li = $('.gallery').find('li'); // Ищем все элементы 'li'
li.each(function(i){
var t = $(this),
img = t.find('img'), // Ищем изображение в элементе 'li'
src = img.attr('src'), // Получаем путь к изображению
width = li.width(), // Получаем ширину 'li'
height = li.height(); // Получаем высоту 'li'
img.hide().after($('<div />').attr('id', 'holder'+i).addClass('holder')); // Скрываем все изображения и создаем контейнеры для объектов Raphael
var r = Raphael('holder'+i, width*2, height*2), // Создаем объекты Raphael
rimg = r.image(src, width/2, height/2, width, height); // Создаем новое изображение с использованием предыдущей переменной
rimg.hover(function() {
this.animate({
scale: 2, // Увеличиваем ваше изображение до нормального размера
rotation : 360
}, 1200, 'elastic');
}, function() {
this.animate({
scale: 1, // Уменьшаем размер изображений
rotation : 0
}, 1200, 'elastic');
});
});
li.hover(function(){
li.css({ 'z-index': 1 }); // Устанавливаем z-index для всех элементов 'li'
$(this).css({ 'z-index': 2 }); // Устанавливаем z-index для элемента, над которым находится курсор мыши
});
});