Альтернатива галерее изображений Lightbox на чистом CSS

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

Нам никогда особо не нравился плагин для создания галереи изображений Lightbox, так что в этом уроке мы предложим свой способ создания подобной галереи изображений. Эффект, создаваемый с помощью вышеупомянутого плагина, знаком буквально всем, так как это один из первых популярных JavaScript-плагинов для создания галерей, так что варианты этой идеи быстро приобрели широкое распространение. К сожалению, в широком распространении есть и значительный недостаток: появилось огромное количество сайтов с одинаковыми галереями, очень немногие из создателей которых хоть что-либо изменили в использованном плагине.

Надеемся, что воссоздание галереи изображений Lightbox с использованием только более простого синтаксиса CSS приведет к тому, что больше людей будут вносить в этот эффект больше изменений и лучше настраивать его для своих сайтов.

Перед тем, как начать, нужно обратить внимание на то, что у этого кода есть три небольших недостатка:

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

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

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

Подробнее о приемах, использованных для создания этой галереи, можно прочитать в других уроках: разметка — это просто доработанная версия простой галереи с использованием CSS, о псевдоклассе :target (целевой элемент) можно узнать больше в уроке о создании меню из вкладок и в уроке о создании imagemaps (изображений с горячими точками).

Код HTML довольно простой:

<body id="core">
        <dl id="gallery">
                <dt>
                        <a href="#pic1"><img src="false-creek-small.jpeg" alt="False Creek, Vancouver, British Columbia"></a>
                <dd id="pic1">
                        <a href="#core"><img src="false-creek.jpeg" alt="False Creek, Vancouver, British Columbia"></a>
                <dt>
                        <a href="#pic2"><img src="lake-louise-small.jpeg" alt="Lake Louise, Alberta, Canada"></a>
                <dd id="pic2">
                        <a href="#core"><img src="lake-louise.jpeg" alt="Lake Louise, Alberta, Canada"></a>
                <dt>
                        <a href="#pic3"><img src="wheat-field-small.jpeg" alt="Wheatfield, Saskatchewan, Canada"></a>
                <dd id="pic3">
                        <a href="#core"><img src="wheat-field.jpeg" alt="Wheatfield, Saskatchewan, Canada"></a>
        </dl>
</body>

Разница между этой разметкой и разметкой в уроке о создании простой галереи с использованием CSS – использование идентификаторов и ссылок. У каждого элемента <dd> есть идентификатор, и внутри каждого связанного с ним элемента <dt> есть ссылка на этот идентификатор. И, наконец, каждое большое изображение ссылается на идентификатор элемента body. Эти идентификаторы, на которые ссылаются элементы, используются для начала и завершения анимации для больших изображений в галерее.

Основной код CSS следующий:

html {
        min-height: 100%;
        position: relative;
}
body {
        margin: 0; height: 100%;
}
dl { float: left; }
dd a {
        background: #fff;
        display: block;
        transition: 4s box-shadow ease-in;
}
dt {
        margin-left: 1.2rem;
        width: 150px;
        margin-top: 1.2rem;
}
dt img {
        width: 150px; height: 150px;
}
dd img {
        width: 640px; height: 427px;
}
dd {
        margin-left: 0;
        background: rgba(0,0,0,0);
        position: absolute;
        top: 0; bottom: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        visibility: hidden;
}

Это еще не весь код, нужный для создания этой галереи изображений. Обратите внимание на свойство относительного позиционирования у тега <html>, которое нужно, чтобы правильно расположить элементы <dd>, в которых находятся большие версии изображений. Элементы <dd> размещены в левом верхнем углу окна браузера, и они растягиваются до полной ширины окна браузера, а их высота задается в зависимости от содержимого страницы. Если ниже края страницы нет содержимого, то высота элемента <dd> равна высоте окна браузера.

Далее рассмотрим код CSS для отображения больших версий изображений:

@keyframes photopresent { 
        0% {
                width: 0;
                height: 0;
                opacity: 0;
        }
        30% {
                width: 640px;
                height: 0;
                opacity: 0;
        }
        60% {
                width: 640px;
                height: 427px;
                opacity: 0;
                margin: 20px;
        }
        100% {
                width: 640px;
                height: 427px;
                opacity: 1;
                margin: 20px;
        }
}
dd:target {
        visibility: visible;
        background: rgba(0,0,0,0.75);
        transition: 1.5s background linear;
}
dd:target a {
        box-shadow: 0 0 8px 8px rgba(0,0,0,0.35);
}
dd:target a img {
        animation: photopresent 3s forwards;
}

При нажатии на уменьшенное изображение уменьшенные изображения потемнеют и появится связанное большое изображение таким же образом, как и при использовании плагина для создания галереи изображений Lightbox. Так как псевдокласс :target поместит идентификатор в ссылку, нажатие на ссылку анимирует появление связанного большого изображения в галерее, что особенно удобно для выделения работ в портфолио для показа заказчикам.

Посмотрите ниже демонстрацию работы этой галереи:

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

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

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

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

Опубликовано в css, июля 5, 2017
Метки: css, css3, верстка, урок css, урок css3, урок верстка

�

Альтернатива галерее изображений Lightbox на чистом CSS

Комментарии

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

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

Страницы

Друзья

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