Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создание галереи из четырех изображений

13 января 2017 | Опубликовано в css | 1 Комментарий »

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

 

 

В разметке используются элементы фигур внутри блоков. Атрибуты подписи в коде ниже записаны в минимальном варианте для экономии места:

<div id="quad">
        <figure>
                <img src="rose-red-wine.jpg" alt>
                <figcaption>Rose Red Wine</figcaption>
        </figure>
        <figure>
                <img src="guiness-barrels.jpg" alt>
                <figcaption>Barrels of Guinness, Dublin</figcaption>
        </figure>
        <figure>
                <img src="green-glass-bottle.jpg" alt>
                <figcaption>One Green Bottle</figcaption>
        </figure>
        <figure>
                <img src="crystal-skull-vodka.jpg" alt>
                <figcaption>Crystal Skull Vodka</figcaption>
        </figure>
</div>

Базовый код CSS обеспечивает расположение изображений бок о бок в правильных пропорциях:

div#quad {
        background-color: #111;
        font-size: 0;
        width: 50%;
        margin: 0 auto;
}
div#quad figure {
        margin: 0;
        width: 50%;
        height: auto;
        transition: 1s;
        display: inline-block;
        position: relative;
}
div#quad figure img {
        width: 100%;
        height: auto;
}

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

div#quad figure:nth-child(1) {
        transform-origin: top left;
}
div#quad figure:nth-child(2) {
        transform-origin: top right;
}
div#quad figure:nth-child(3) {
        transform-origin: bottom left;
}
div#quad figure:nth-child(4) {
        transform-origin: bottom right;
}

И, наконец, код CSS для появления подписей и элементов полной ширины:

div#quad figure figcaption {
        margin: 0;
        opacity: 0;
        background: rgba(0,0,0,0.3);
        color: #fff;
        padding: .3rem;
        font-size: 1.2rem;
        position: absolute;
        bottom: 0;
        width: 100%;
        transition: 1s 1s opacity;
}
.expanded {
        transform: scale(2);
        z-index: 5;
}
div#quad figure.expanded figcaption {
        opacity: 1;
}
div.full figure:not(.expanded) {
        pointer-events: none;
}
div#quad figure:hover {
        cursor: pointer;
        z-index: 4;
}

Возможно, эти стили будут более понятны в связи с кодом JavaScript, который применяется в конце документа:

var quadimages = document.querySelectorAll("#quad figure");
for (i=0; i<quadimages.length; i++) {
        quadimages[i].addEventListener( 'click',  function() {
                this.classList.toggle("expanded");
                quad.classList.toggle("full");
        });
}

Когда пользователь нажимает или касается маленького изображения, оно разворачивается в полноразмерное и к нему применяется класс. Свойство z-index, связанное с этим классом,  обеспечивает нахождение этого изображения всегда поверх остальных, в то же время удаление событий, связанных с указателем мыши, для остальных изображений гарантирует, что на них нельзя будет нажать в этот момент.

Единственное условие — все изображения должны быть строго одинакового размера, теоретически этот способ может быть применен также и к шести или более изображениям при задании подходящего начала трансформации и соответствующих пропорциях.

Использована фотографии Pete Slater, Christina Ann VanMeter, Jen Scheer и Shadi Samawi,  лицензированные по лицензии Creative Commons. 

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:


�


Комментарии

Похожие статьи

Случайные статьи



Друзья

    • Самые комментируемые