Необычная Галерея изображений – 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

romaamor 18 май 2013, 12:04 Сообщение

:scratch: Прикольно. Шас буду тренироваться для установки вместо шапки.
  • 0

romaamor 18 май 2013, 14:52 Сообщение

Теперь вопрос как эту шапку отцентровать, и убрать серый фон ?
Демо тут http://shishatskaya.luckbb.ru/index.php
  • 0

CabinetAdmin 18 май 2013, 16:08 Сообщение

Она по центру. А серый фон и полоса тут:

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

#logodesc {
	margin-bottom: 5px;
	padding: 5px 25px;
	background: #D9DFE4;
	border-bottom: 1px solid #4787A7;
}
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 18 май 2013, 16:22 Сообщение

CabinetAdmin писал(а):Она по центру
У меня на основном форуме при смене маштаба шапка остается прежней. А здесь меняет размер.
  • 0

CabinetAdmin 18 май 2013, 16:29 Сообщение

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

romaamor 18 май 2013, 16:33 Сообщение

И еще вопрос не по теме. А почему постоянно с админки выбрасывает ?
  • 0

CabinetAdmin 18 май 2013, 16:39 Сообщение

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

romaamor 18 май 2013, 16:45 Сообщение

CabinetAdmin писал(а):Из какой? Настройки cookies надо смотреть..
У вас на http://shishatskaya.luckbb.ru/index.php
  • 0

CabinetAdmin 18 май 2013, 16:49 Сообщение

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

romaamor 18 май 2013, 18:13 Сообщение

CabinetAdmin, а можно там как то убрать все те фразы что всплывают ?
  • 0

CabinetAdmin 18 май 2013, 19:31 Сообщение

Надписи формируются из alt:

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

<img src="/images/pic1.jpg" alt="<i>A look to New Jersey <a href='http://1x.com/photo/53587'>by Hannes Cmarits</a></i>" />
Удали их и не будет надписей.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 18 май 2013, 20:07 Сообщение

Не дает мне возможности изменить шаблон. Пишет -
Информация
Ошибка отправки формы. Попробуйте ещё раз.
Пришлось удалять по чучуть. У вас там нет ограничений на количество удаляемых символов ? :)
  • 0

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

romaamor писал(а):У вас там нет ограничений на количество удаляемых символов ?
Нет, нету...

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

romaamor 18 май 2013, 20:32 Сообщение

CabinetAdmin писал(а):Нет, нету...
Странно.
Я еще раньше заметил что не дает шаблоны нормально менять. Может я что то в админке наклацал ?
CabinetAdmin , скину в личку пароль и логин.Глянете что там не так ?
  • 0

Похожие темы