184 Данная галерея отличается от стандартной. Здесь невозможно просмотреть по порядку имеющиеся изображения. Главная картинка будет иметь наибольший размер, остальные же останутся в виде миниатюр. Для того чтобы создать стандартные галереи c возможностью просмотра всех изображений, обратитесь к другим урокам по данной тематике.
- Создание адаптивной галереи миниатюр
- 3D галерея на CSS3 и jQuery
- Красивая слайд-шоу галерея в стиле Apple на CSS & jQuery
- Более 33 jQuery плагинов для вашей галереи
Ниже представлена ссылка, по которой Вы сможете ознакомиться с представленными эффектами.
Итак, разметка представлена следующим образом:
|
1 2 3 4 5 6 |
<figure class="stack stack-sidegrid"> <img src="img/1.png" alt="img01"/> <img src="img/3.png" alt="img03"/> <img src="img/4.png" alt="img04"/> <img src="img/2.png" alt="img02"/> </figure> |
Для всех изображений галереи (кроме главного) устанавливается абсолютное позиционирование:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.stack { margin: 20px auto; width: 400px; padding: 0; position: relative; max-width: 100%; } .stack img { max-width: 100%; position: absolute; top: 0; left: 0; transition: all 0.3s; } .stack img:last-child { position: relative; } |
Ниже приведен код, который поможет расположить изображения в виде таблицы:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.stack-bouncygrid.active img { transform: scale(0.48); } .stack-bouncygrid.active img:nth-child(4) { transform-origin: 0 0; } .stack-bouncygrid.active img:nth-child(3) { transform-origin: 100% 0; } .stack-bouncygrid.active img:nth-child(2) { transform-origin: 0 100%; } .stack-bouncygrid.active img:first-child { transform-origin: 100% 100%; } |
Возникает вопрос: где лучше всего применять подобный тип галереи изображений? Такой вывод изображений удобен, если Вы, к примеру, публикуете новости. Кроме того, эту галерею можно встроить на страницу с видео-блогом или видео-руководствами для удобного размещения.
Отображение данного эффекта обеспечивается Javascript. Для этого необходимо выполнить подключение двух библиотек — classie.js и main.js и поместить код переключателя. Если не добавлять переключатель, то картинки будут выводиться непосредственно в развернутом виде.
