Интересная галерея для сайта в стиле Polaroid

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

На первый взгляд галерея кажется достаточно сложной, но это не так, все уже сделано и скомпилировано за Вас, вам остается только правильно разместить скрипты в Ваш документ. И так, давайте приступим.

Шаг 1. HTML

Для самой галереи мы используем следующий html код. Поправьте его для вставки своих собственных изображений:

</pre>

<h2>Serenity Beach</h2>

</figcaption></figure><figure><a href="#"> <img alt="img02" src="img/2.jpg" /> </a>

<h2>Happy Days</h2>

<div>Описание</div>

</figcaption></figure><figure data-shuffle-iteration="3"></figure>

<h2>Lovely Green</h2>

</figcaption></figure>

</div>

</section>

<pre>

Количество итераций при перемешивании может быть задано в атрибуте data-shuffle-iteration. Класс “photostack-start” используется для отображения изначального состояния контейнера галереи. При клике, первое изображение отобразится посередине, а все остальные будут расположены вокруг него.