Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

Jquery → Креативная модернизированная галерея

Креативная модернизированная галерея

Сегодня я хотел бы показать вам, как создать современную галерею (с крутым эффектом анимации), используя библиотеку Рафаэля и JQuery.

Демо: смотреть
Скачать: gallery.zip [390,35 Kb] (cкачиваний: 355)


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

Создать три файла: index.html, default.css, init.js и скачаем библиотеку Рафаэля. Затем включите все файлы в вашу страницу. Между тегами 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
<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>


Мы создаем основной контейнер, который называется "галерея", который проводит неупорядоченный список с изображениями и с помощью css добьемся нужного выравнивания. Все изображения имеют размер 400 пикселей на 400 пикселей.

default.css
ul.reset,
ul.reset li {
    display:block;
    list-style:none;
    padding:0;
    margin:0;
}
  
  
.gallery ul li {
    width:200px; /* a half of image width */
    height:200px; /* a half of image height */
    margin:0 10px 10px 0;
    float:left;
    position:relative;
}
  
.holder {
    position:absolute;
    top:0;
    left:0;
    margin:-100px 0 0 -100px; /* margin-left: a half of 'li' width and margin-top: a half of 'li' height */
}

Теперь наш список с изображениями выровнен как нам нужно.

init.js
В этом файле хранятся настройки галереи.
$(function(){
      
    var li = $('.gallery').find('li'); // find all 'li' elements
          
    li.each(function(i){
        var t = $(this),
            img = t.find('img'), // find image in 'li' element
            src = img.attr('src'), // get path to your image
            width = li.width(), // get 'li' width
            height = li.height(); // get 'li' height
              
        img.hide().after($('<div />').attr('id', 'holder'+i).addClass('holder')); // hide all images and create containers for Raphael objects
  
        var r = Raphael('holder'+i, width*2, height*2), // create Raphael objects
            rimg = r.image(src, width/2, height/2, width, height); // create new images using previous variables
          
        rimg.hover(function() {
            this.animate({
                scale: 2, // enlarge your images to the normal size
                rotation : 360
            }, 1200, 'elastic');
        }, function() {
            this.animate({
                scale: 1, // decrease size of images
                rotation : 0
            }, 1200, 'elastic');
        });
          
    });
      
    li.hover(function(){
        li.css({ 'z-index': 1 }); // set z-index to all 'li' elements
        $(this).css({ 'z-index': 2 }); // set z-index to the hovering element
    });
              
});


Демо: смотреть
Скачать: gallery.zip [390,35 Kb] (cкачиваний: 355)


На этом наш урок подошёл к концу. Удачных проектов!
Опубликовал dimas_ua, 24-05-2011, 00:00 Комментариев: 0
 (голосов: 15)