галерея изображений 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


11 комментариев:

  1. Ух ты! Очень полезно. Запомню, что у Вас есть такой пост, если захочу так оформить статью ))

    ОтветитьУдалить
  2. Удобный и оригинальный способ разместить много фото.

    ОтветитьУдалить
  3. Викусь! Приветик! Я давно у тебя взяла форму подписки. А сейчас мне пишут, что не отправляет. Не поможешь разобраться? Пишет, что в обозревателе Опера( хотя у меня не опера) отключен источник перехода.Данные блокируются анитивирусником- но я его не меняла или межсетевым экраном . Что к чему? Что делать? Спасибо!

    ОтветитьУдалить
  4. Привет, Ирина. Посмотрела через код твой код формы подписки ( если ты имеешь в виду синюю в подвале Библиомир, , то у тебя там стоит адрес моего фида. Скинь мне на почту код этой формы, что - то найти не могу у себя, может удалила эту статью.

    ОтветитьУдалить
    Ответы
    1. Вик, нет раньше все работало правильно. Тут перебои где то в др месте. Но я вот тут прочитала твою одну ст. и тоже решила установить родной блогеровский гаджет. Меньше проблем будет- ты права. Но вот хотела его перенести на ст. стр, а там кодов нет- устанавливается автоматом

      Удалить
  5. Интересный вариант галереи. Буду знать, где взять код. Спасибочки, Вика, за очередную подсказку.

    ОтветитьУдалить
    Ответы
    1. Люба, когда много фото нужно показать, самое то.

      Удалить
  6. Виктория, доброго времени суток. У меня, почему-то, все картинки располагаются вертикально. Причём, первые шесть, чуть развернуты (как и у Вас), а все остальные ровненько одна под одной. В чём может быть причина?

    ОтветитьУдалить
    Ответы
    1. В HTML редакторе всё становится как надо. У меня в блоге все фото одна под другой...

      Удалить
  7. Лариса, мне нужно видеть. Как я могу так знать. Возможно стоит размеры картинок поменять. Смотреть надо. И код ваш желательно мне на почту кинуть.

    ОтветитьУдалить
  8. Ирина, я вот тут тебя не совсем поняла. Но вот хотела его перенести на ст. стр, а там кодов нет- устанавливается автоматом

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск