6 124 Скрипты / Gallery

Эффект анимации для галереи

Эффект, который позволит преобразить вашу галерею фотографий, с помощью библиотеки Raphael и jQuery. Нужно создать три файла: index.html, default.css, init.js и скачать библиотеку Raphael. И подключить все файлы + библиотеку jquery в хедере.

<link href="css/default.css" rel="stylesheet" type="text/css" />
<script type="text/jаvascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="js/raphael.js" type="text/jаvascript"></script>
<script src="js/init.js" type="text/jаvascript"></script>

HTML

<div class="gallery">
    <ul class="reset">
        <li><img src="1.jpg" alt=""></li>
        <li><img src="2.jpg" alt=""></li>
        <li><img src="3.jpg" alt=""></li>
        <li><img src="4.jpg" alt=""></li>
        <li><img src="5.jpg" alt=""></li>
        <li><img src="6.jpg" alt=""></li>
    </ul>
</div>

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

CSS

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 */
}

Файл стиля очень маленький, так что можете изменять его по своему вкусу.

JS

init.js

Вот и всё.

Скачать 883Загрузок 234,21 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи