Простая jQuery галерея изображений

Библиотека jQuery появилась в 2007 году. С тех пор с ее использованием было разработано огромное количество плагинов, в том числе и галерей изображений. Они изобилуют красивыми рамками, годными анимационными переходами и замечательным дизайном. Однако, что интересно, мне еще не попадалась на глаза какая-нибудь jQuery-галерея с возможностью поворота изображения. А ведь довольно часто приходится просматривать изображения, перевернутые на 90 градусов, а то и вовсе загруженные вверх-ногами. Именно такая функциональность требовалась для моего проекта.

На самом деле, переворачивать изображения с использованием javascript очень легко. Зная это, я решил написать свою простую галерею изображений с возможностью поворота, которая базируется на плагине jquery. Сказано – сделано, спустя несколько часов появились вполне себе годные результаты:

Демонстрация работы

Как использовать

Для того, чтобы галерея работала корректно, необходимо две вещи: подгруженную библиотеку jQuery и подгруженные шрифты font-awesome. В head подключаем необходимые стили и скрипты:

<link rel="stylesheet" href="css/font-awesome.min.css">

<link rel="stylesheet" href="css/jquery.gallery.min.css">

...и...

<script type="text/javascript" src="js/jquery-2.1.4.js"></script>

<script type="text/javascript" src="release/jquery.gallery.min.js"></script>

Верстаем необходимую разметку галереи:

<div class="simple_img_gallery">

	<a href="images/1.jpg"><img src="images/1.jpg" /></a>

	<a href="images/2.jpg"><img src="images/2.jpg" /></a>

	<a href="images/3.jpg"><img src="images/3.jpg" /></a>

	<a href="images/4.jpg"><img src="images/4.jpg" /></a>

	<a href="images/5.jpg"><img src="images/5.jpg" /></a>

	<a href="images/6.jpg"><img src="images/6.jpg" /></a>

</div>

И инициализируем галерею:

$(function() {

	$('.simple_img_gallery').createSimpleImgGallery();

});

Готово. Вышло минималистично и вполне симпатично.

Реализованная галерея доступна на github.

Итог

В интернете появилось на одну галерею изображений больше:)

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

Также, для уменьшения количества зависимостей можно попробовать отказаться от font-awesome, поскольку из этого большого набора иконок используются только 4 из них.