Lecaw

Учимся создавать Web-сайты

jQuery Галерея изображений – jqFancyTransitions

September 11, 2012 630hits
 
 

В нашем новом учебном руководстве я хотел бы показать, как создать jQuery галерею изображений с CSS transition. Я буду использовать готовый jQuery плагин – jqFancyTransitions. Это простой и эффективный jQuery плагин, предназначенный для того, чтобы вывести на экран фотографии, как слайд-шоу, с необычными эффектами css transition. Есть много способов настройки плагина. Все возможные варианты будут опубликованы в конце этой статьи.

Исходные файлы ДЕМО

 

 

Шаг 1. HTML

Для начала добавим файлы стилей и скриптов в нашу разметку:

<!-- добавление стилей -->
<link href="/css/main.css" rel="stylesheet" type="text/css" /> <!-- добавление скриптов -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="/js/jqFancyTransitions.1.8.min.js"></script>
<script src="/js/main.js"></script>

Затем подготовим HTML разметку с несколькими фотографиями:

<div id="gallery">
<img src="/images/pic1.jpg" alt="<i>A look to New Jersey <a href='http://1x.com/photo/53587'>by Hannes Cmarits</a></i>" />
<img src="/images/pic2.jpg" alt="<i>Reflections [color] <a href='http://1x.com/photo/20045'>by Sven Fennema</a></i>" />
<img src="/images/pic3.jpg" alt="<i>Silk <a href='http://1x.com/photo/45014'>by Bryan Jolly</a></i>" />
<img src="/images/pic4.jpg" alt="<i>Space City III <a href='http://1x.com/photo/31495'>by WisoNet</a></i>" />
<img src="/images/pic5.jpg" alt="<i>Forms and reflections <a href='http://1x.com/photo/30093'>by Sven Fennema</a></i>" />
<img src="/images/pic6.jpg" alt="<i>Skyarena <a href='http://1x.com/photo/19329'>by Luis Romero</a></i>" />
</div>

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

Шаг 2. CSS

css/main.css

Настройка галереи:

.ft-title {
    background-color: rgba(128, 128, 128, 0.8) !important;
    font-size: 18px;
    font-weight: bold;
    height: 37px;
    line-height: 40px;
    margin-right:10px;
    text-align: right;
    width: 100%;
}
.ft-title a {
    color: #fff;
}
.ft-prev, .ft-next {
    /* CSS3 transform */
    -webkit-transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    -ms-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
}
.ft-prev {
    background-color: rgba(128, 128, 128, 0.5);
    border-color: transparent #0072BC transparent transparent;
    border-radius: 0 30px 30px 0;
    border-style: solid;
    border-width: 30px;
    height: 0;
    overflow: hidden;
    width: 0;
}
.ft-next {
    background-color: rgba(128, 128, 128, 0.5);
    border-color: transparent transparent transparent #0072BC;
    border-radius: 30px 0 0 30px;
    border-style: solid;
    border-width: 30px;
    overflow: hidden;
    width: 0;
    height: 0;
}
.ft-prev:hover {
    border-right-color: #00548b;
}
.ft-next:hover {
    border-left-color: #00548b;
}
#ft-buttons-gallery a:link, #ft-buttons-gallery a:visited {
    background-color: #F5F5F5;
    border: 1px solid #EBEBEB;
    color: #0072BC;
    font-weight: normal;
    margin-left: 10px;
    padding: 2px 7px;
    text-decoration: none;
    width: 22px;
}
#ft-buttons-gallery a.ft-button-gallery-active {
    background-color: #DDEEFF;
    border: 1px solid #BBDDFF;
    color: #0072BC;
    cursor: default;
    margin-left: 10px;
    padding: 2px 7px;
    text-decoration: none;
}

Есть стили для области заголовка, для двух кнопок и разбиение на страницы.

Шаг 3. jQuery галерея

js/main.js

Теперь, мы должны инициализировать jQuery галерею:

$(function(){
    $('#gallery').jqFancyTransitions({
        effect: 'zipper', // типы эффектов: wave, zipper, curtain
        width: 850, // ширина панели
        height: 600, // высота панели
        strips: 15, // номер скрипта
        delay: 3000, // задержка между изображения в ms
        stripDelay: 20, // задержка между скриптами в ms
        titleOpacity: 0.8, // прозрачность заголовка
        titleSpeed: 2000, // speed of title appereance in ms
        position: 'curtain', // позиции: top, bottom, alternate, curtain
        direction: 'fountainAlternate', // направление: left, right, alternate, random, fountain, fountainAlternate
        navigation: true, // кнопки навигации
        links: false // показывать ссылки изображений
    });
})

Все очень просто, не так ли? Можете пройти по этой ссылке, чтобы найти официальную демонстрационную страницу и документацию.

Шаг 4. Изображения

Все изображения находятся в папке "images"

jqFancyTransitions настройки

Можете использовать следующие настройки для плагина:

ПараметрТипПо умолчаниюОписание
effect string   Переход, возможные значения: wave, zipper and curtain
width int 500 Ширина панели
height int 332 Высота панели
strips int 10 Количество полос
delay int 5000 Задержка между изображениями в мс.
stripDelay int 50 Задержка между полосками в мс.
titleOpacity float 0,7 Прозрачность заголовка
titleSpeed int 1000 Скорость появления заголовка в мс.
position string alternate Позиция, возможные значения: top, bottom, alternate, curtain
direction string fountainAlternate Направление, возможные значения: left, right, alternate, random, fountain, fountainAlternate
navigation boolean false Кнопки навигации
links boolean false Ссылка изображения

 

Исходные файлы ДЕМО

 
 

Дополнительная информация

RATTING:
(1 Голосовать)

Медиа