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

jqFancyTransitions совместим и полностью протестирован на: Safari 2 +, Internet Explorer 6 +, Firefox 2 +, Google Chrome 3 +, Opera 9 +.

Шаг 1. HTML

Для начала добавим файлы стилей и скриптов в нашу разметку:
Добавляем стили и скрипты на страницу (между <head>)

Код: Выделить всё

<!-- Стили -->
<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="путь до файла/jqFancyTransitions.1.8.min.js"></script>
<script src="путь до файла/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>
Обратите внимание на атрибут alt, описания введённые в этот атрибут будут преобразованы в заголовки.

Шаг 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. JS

js/main.js

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

Код: Выделить всё

$(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. Изображения

jqFancyTransitions настройки

Можете использовать следующие настройки для плагина:
ПараметрТипПо умолчаниюОписание
effectstringПереход, возможные значения: wave, zipper and curtain
widthint500Ширина панели
heightint332Высота панели
stripsint10Количество полос
delayint5000Задержка между изображениями в мс.
stripDelayint50Задержка между полосками в мс.
titleOpacityfloat0,7Прозрачность заголовка
titleSpeedint1000Скорость появления заголовка в мс.
positionstringalternateПозиция, возможные значения: top, bottom, alternate, curtain
directionstringfountainAlternateНаправление, возможные значения: left, right, alternate, random, fountain, fountainAlternate
navigationbooleanfalseКнопки навигации
linksbooleanfalseСсылка изображения
Источник: Fancy Image gallery – jqFancyTransitions
Комментарии: 15

CabinetAdmin 18 май 2013, 20:52 Сообщение

Дело было в:

Код: Выделить всё

<!-- Стили -->
<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>
Нужно ставить перед </head>, а не перед </body>. Сейчас поправлю в инструкции...

Сейчас не должно быть проблем.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Похожие темы