Лого SiteHere.ru

Галерея изображений на jQuery с интересным эффектом

Галерея изображений на jQuery с интересным эффектом

Сегодня мы рассмотрим jQuery плагин Flipping Gallery, который позволяет создавать классные галереи изображений с очень оригинальными переходами. В примере есть 5 видов переходов с использованием данного плагина. Плагин действительно очень прост в использовании, поэтому любой сможет с ним полноценно работать.

Посмотрите также — Интерактивная 3D галерея на CSS и jQuery

Пример можно увидеть здесь:

Посмотреть примерСкачать

Мы рассмотрим более подробно как создать меню из Демо 2, когда меню появляется слева вверху.



HTML часть

Сперва необходимо подключить библиотеку jQuery, которую можно скачать здесь и плагин Flipping Gallery, между тегами <head>:

1
2
3
4
5
6
<head>
    ...
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery.flipping_gallery.js"></script>
    ...
</head>

Затем располагаем изображения. Вы можете добавлять столько изображений, сколько пожелаете:

1
2
3
4
5
6
7
8
<div class="gallery">
    <a href="#"><img src="img/1.jpg"></a>
    <a href="#"><img src="img/2.jpg"></a>
    <a href="#"><img src="img/3.jpg"></a>
    <a href="#"><img src="img/4.jpg"></a>
    <a href="#"><img src="img/5.jpg"></a>
    ...
</div>

А чтобы добавить описание для изображений(как в демо 4 и 5) необходимо использовать атрибут data-caption:

1
2
3
4
5
6
7
8
<div class="gallery">
    <a href="#" data-caption="Очень"><img src="img/1.jpg"></a>
    <a href="#" data-caption="классная"><img src="img/2.jpg"></a>
    <a href="#" data-caption="галерея"><img src="img/3.jpg"></a>
    <a href="#" data-caption="с помощью"><img src="img/4.jpg"></a>
    <a href="#" data-caption="Flipping"><img src="img/5.jpg"></a>
    ...
</div>


JS часть

1
2
3
4
5
6
7
8
9
$(".gallery").flipping_gallery({
    direction: "forward",
    selector: "> a",
    spacing: 10,
    showMaximum: 15,
    enableScroll: true,
    flipDirection:"bottom",
    autoplay:500    
  });

Рассмотрим что означает каждый метод:

  • direction — метод отвечающий за то, как будут появляться изображения. Если «forward», то изображение из начала будет помещаться в конец, если «backward» — наоборот. По умолчанию значение задается «forward».
  • selector — селектор по которому выбираем изображения, его можно изменить по желанию.
  • spacing — задает отступ между изображениями в перспективе.
  • showMaximum — задает количество изображений, которые видны пользователю. Можно использовать хоть 100 изображений, но показываться будут только первые 15, что очень удобно и не нагружает браузер.
  • enableScroll — можно просматривать изображения используя колесо мыши.
  • flipDirection — определяет куда будет скользить изображение: «left» — влево, «right» — вправо, «top» — вверх и «bottom» — вниз. По умолчанию оно скользит вниз.
  • autoplay — автозапуск галереи. Задается в милисекундах, т.е. через сколько будут сменяться изображения.


Вывод

Теперь у вас есть великолепная галерея, которую можно использовать при размещении своих фотографий.


Успехов!

Источник: www.onextrapixel.com

3 комментария к записи
  • Вячеслав

    Классные галерейки!Благодарю.

     
    • Юрий

      Вячеслав, рад что вам пригодились :).

       
  • Ольга

    Жаль что не работает в IE? а так красиво

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *