Необычная Галерея изображений – 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 настройки
Можете использовать следующие настройки для плагина:
Параметр | Тип | По умолчанию | Описание |
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 | Ссылка изображения |
Источник:
Fancy Image gallery – jqFancyTransitions