Галерея в виде разбросанных снимков Polaroid

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

Мы используем следующую структуру для нашей галереи:

<section id="photostack-1" class="photostack photostack-start">
    <div>
        
        <!--  Polaroid по умолчанию, без обратной стороны -->
        <figure>
            <a href="http://goo.gl/Qw3ND4" class="photostack-img">
                <img src="img/1.jpg" alt="img01"/>
            </a>
            <figcaption>
                <h2 class="photostack-title">Название</h2>
            </figcaption>
        </figure>
        
        <!-- Polaroid с обратной стороной -->
        <figure>
            <a href="http://goo.gl/fhwlSP" class="photostack-img">
                <img src="img/2.jpg" alt="img02"/>
            </a>
            <figcaption>
                <h2 class="photostack-title">Название</h2>
                <!-- optional backside -->
                <div class="photostack-back">
                    <p>Текст на обратной стороне фотографии</p>
                </div>
            </figcaption>
        </figure>
        
        <!-- Example for different shuffle iteration count -->
        <figure data-shuffle-iteration="3">
            <!-- ... -->
        </figure>
        
        <!-- Example for a "dummy" Polaroid -->
        <figure data-dummy>
            <a href="#" class="photostack-img"><img src="img/7.jpg" alt="img07"/></a>
            <figcaption>
                <h2 class="photostack-title">Название</h2>
            </figcaption>
        </figure>
        
        <!-- ... -->
    </div>
</section>

Класс "photostack-start" может быть использован, чтобы показать первоначальное наложение на контейнер с галереей. После того, как по галерее кликнули мышью, элементы премещаются и первый элемент будет показан в середине.

Блок с классом "photostack-back" может быть использован для вставки некоторой информации на обратной стороне Polaroid.

Изменение числа итераций (количество раз которое мы хотим, чтобы все Polaroid перемещались пока следующий элемент становится текущим) можно осуществлять при помощи data-attribute data-shuffle-iteration.

Отметим, что основной контейнер DIV установлен в ширину и высоту на 100%, что означает, что элементы будут разбросаны по всей странице. Если мы захотим уменьшить пространство галереи, мы можем установить размер этого DIV немного меньше.

Взгляните на скриншоты галереи:

По желанию, начальное состояние галереи может иметь наложение.

Текущее изображение перемещается в середину, а остальные элементы передвигаются в стороны.

Если для фото задана обратная сторона, можно перевернуть Polaroid, нажав на текущую точку (в виде изогнутой стрелки) во второй раз.

Я надеюсь, вам понравилась эта галерея и вы найдете её полезной для себя.