галерея изображений CSS для BLOGGER

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

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

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

Демонстрация

Код.

<div class="gallery">
    <a tabindex="1"><img src="адрес картинки .jpg"></a>
    <a tabindex="2"><img src="адрес картинки .jpg"></a>
    <a tabindex="3"><img src="адрес картинки .jpg"></a>
    <a tabindex="4"><img src="адрес картинки .jpg"></a>
    <a tabindex="5"><img src="адрес картинки .jpg"></a>
    <a tabindex="6"><img src="адрес картинки .jpg"></a>
    <a tabindex="7"><img src="адрес картинки .jpg"></a>
    <a tabindex="8"><img src="адрес картинки .jpg"></a>
    <a tabindex="9"><img src="адрес картинки .jpg"></a>
    <a tabindex="10"><img src="адрес картинки .jpg"></a>
    <a tabindex="11"><img src="адрес картинки .jpg"></a>
    <a tabindex="12"><img src="адрес картинки .jpg"></a>
</div>

<style>

 .gallery {
    margin: 100px auto 0;
    width: 700px;
}
.gallery a {
    display: inline-block;
    height: 135px;
    position: relative;
    width: 180px;
 
    -moz-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
.gallery a img {
 
    cursor: pointer;
    display: block;
    height: 100%;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 1;
 
 
    -webkit-transition: all 1.0s ease;
    -moz-transition: all 1.0s ease;
    -o-transition: all 1.0s ease;
    transition: all 1.0s ease;
 
}
/* Вращение  */
.gallery a:nth-child(1) img {
    -moz-transform: rotate(-25deg);
    -webkit-transform: rotate(-25deg);
    transform: rotate(-25deg);
}
.gallery a:nth-child(2) img {
    -moz-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
}
.gallery a:nth-child(3) img {
    -moz-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
}
.gallery a:nth-child(4) img {
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
}
.gallery a:nth-child(5) img {
    -moz-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
}
.gallery a:nth-child(6) img {
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.gallery a:nth-child(7) img {
    -moz-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
}
.gallery a:nth-child(8) img {
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
}
.gallery a:nth-child(9) img {
    -moz-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
}
.gallery a:nth-child(10) img {
    -moz-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
}
.gallery a:nth-child(11) img {
    -moz-transform: rotate(25deg);
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
}
.gallery a:nth-child(12) img {
    -moz-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}
.gallery a:focus img {
    cursor: default;
    height: 350%;
    left: -150px;
    top: -100px;
    position: absolute;
    width: 350%;
    z-index: 25;
    /* Правила перехода */
    -webkit-transition: all 1.0s ease;
    -moz-transition: all 1.0s ease;
    -o-transition: all 1.0s ease;
    transition: all 1.0s ease;
 
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}</style>

Код предусмотрен на 12 изображений, думаю, что этого вполне достаточно. Розовым цветом я отметила размеры картинки при увеличении. Тут можно пробовать поиграться.

Голубым цветом выделены размеры миниатюр. Для моей демки они отобразились более корректно с таким размером. Если что не устраивает попробуйте поменять их.

В строчки <img src="адрес картинки .jpg"> вставляйте адреса ваших картинок. Ну и готовый код устанавливайте или на статичную страницу, или в тело поста в режиме HTML, или в гаджет.  Эффект появится после публикации.

И ещё на один очень важный момент хочу обратить ваше внимание. Сначала напишите сообщение, задайте все настройки и перейдите в режим HTML, в нужном месте установите готовый код. Не возвращаясь в обычный режим, публикуете. После публикации страницы или поста с этой галереей, не стоит больше корректировать этот пост. Установили, опубликовали и всё. Иначе код сломается.

В коде присутствует атрибут tabindex. Это свойство задает порядок вкладок для элементов. Он позволяет использовать кнопку «tab» (или «shift + tab») для переключения между изображениями. Кому интересно подробнее узнать про tabindex - информации много в сети.

Возможно вам понравится и эта галерея.

👇

Получайте новые сообщения с блога прямо на почту

Введите Ваш email