Создаем галерею изображений с использованием библиотеки Raphael

В данном уроке мы разберемся, как создать отличную галерею изображений с интересным анимационным эффектом с помощью библиотек 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:

index.html

Разметка HTML для галереи достаточно проста.

Мы создаем основной контейнер '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($('
').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 для элемента, над которым находится курсор мыши 
    });
             
});
 

Готово!

Источник урока: playground.mobily.pl/tutorials/creating-a-modern-gallery-with-raphael/demo.html