Все для веб-дизайнера
Интересная галерея для сайта в стиле Polaroid
В данном уроке мы рассмотрим как создать весьма интересную галерею для сайта, а именно стилизованную под разбросанные фотографии с полароида. В демонстрации мы рассмотрим несколько вариантов, в которых будет представлен разный вариант отображение и подписи к ним. Кроме этого мы будем использовать SVG графику. Мы используем скрипт плоской галерейки, где все фотографии разбросаны в случайном порядке. При выборе какого-то конкретного изображения, оно перемещается в центр, а все остальные располагаются вокруг него.
На первый взгляд галерея кажется достаточно сложной, но это не так, все уже сделано и скомпилировано за Вас, вам остается только правильно разместить скрипты в Ваш документ. И так, давайте приступим.
Шаг 1. HTML
Для самой галереи мы используем следующий html код. Поправьте его для вставки своих собственных изображений:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
</pre> <section id="photostack-1"> <div><!-- default Polaroid without backside --> <figure><a href="#"> <img alt="img01" src="img/1.jpg" /> </a> <figcaption> <h2>Serenity Beach</h2> </figcaption></figure><figure><a href="#"> <img alt="img02" src="img/2.jpg" /> </a> <figcaption> <h2>Happy Days</h2> <!-- optional backside --> <div>Описание</div> </figcaption></figure><figure data-shuffle-iteration="3"><!-- ... --></figure> <!-- Example for a "dummy" Polaroid --> <figure data-dummy=""><a href="#"><img alt="img07" src="img/7.jpg" /></a> <figcaption> <h2>Lovely Green</h2> </figcaption></figure> <!-- ... --></div> </section> <pre> |
Количество итераций при перемешивании может быть задано в атрибуте data-shuffle-iteration. Класс “photostack-start” используется для отображения изначального состояния контейнера галереи. При клике, первое изображение отобразится посередине, а все остальные будут расположены вокруг него.
Элемент div с классом “photostack-back” может использоваться как контейнер с подробной информацией о фотке.
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Интересно:
| Опубликовал admin 25.01.2014 в 14:29, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
Загрузка ...