—»     —»   jqFancyTransitions: привлекательная галерея изображений
  Раздел: Руководства   Нет комментариев  

jqFancyTransitions: привлекательная галерея изображений



jqFancyTransitions: привлекательная галерея изображений

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

Демо | Скачать архив
Внимание! У вас нет прав для просмотра скрытого текста.


Итак, давайте скачаем исходные файлы и приступим к разработке кода!

Этап 1 – HTML

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

<!-- add styles -->
<link href="css/main.css" rel="stylesheet" type="text/css" />

<!-- add scripts -->
<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>

Здесь будет представлено 6 изображений, у каждого из которых будет alt-атрибут. В последствии, значение этого атрибута будет преобразовано в заголовок для каждой фотографии. Как видно, здесь мы используем возможности HTML.

Этап 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, // width of panel
height: 600, // height of panel
strips: 15, // number of strips
delay: 3000, // delay between images in ms
stripDelay: 20, // delay beetwen strips in ms
titleOpacity: 0.8, // opacity of title
titleSpeed: 2000, // speed of title appereance in ms
position: 'curtain', // top, bottom, alternate, curtain
direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate
navigation: true, // prev and next navigation buttons
links: false // show images as links
});
})

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

Этап 4 – Изображения

Все изображения галереи находятся в папке “images”.

Параметры jqFancyTransitions

Для инициализации плагина вы можете использовать следующие параметры:

* Доступные значения эффекта перехода: wave, zipper и curtain

* Ширина панели

* Высота панели

* Количество полос

* Задержку между изображениями в ms

* Задержку между полосами в ms

* Уровень непрозрачности заголовка

* Скорость отображения заголовка в ms

* Положения полос: top, bottom, alternate, curtain

* Направление полос: left, right, alternate, random, fountain, fountainAlternate

* Отображение навигационных кнопок prev-next

* Отображение изображение в виде ссылок

В заключение

На сегодня все. Только что мы разработали новую фотогалерею при помощи плагина jqFancyTransitions. Надеемся, что здесь все описано очень доступно, и что вы сможете получить отличный результат. Удачи вам!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: слайд-шоу, фотография
Опубликовал Design FactoRy   Прочитано (раз): 3945   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930