Привет, друзья. Когда есть необходимость разместить несколько изображений на странице, да ещё в красиво оформленном стиле, эта галерея изображений, о которой пойдёт речь сегодня, просто идеальный вариант.
Фишка галереи в том, что все изображения разбросаны в хаотическом порядке, а при клике кнопкой мыши по определенной миниатюре она увеличивается и одновременно, благодаря стилям анимации, увеличенная миниатюра разворачивается перпендикулярно окну браузера.
Ещё сам код галереи с эффектом увеличения миниатюр очень лёгкий, без подключения библиотек и скриптов. Давайте будем смотреть на тестовом блоге её в рабочем состоянии.
Код.
Код предусмотрен на 12 изображений, думаю, что этого вполне достаточно. Розовым цветом я отметила размеры картинки при увеличении. Тут можно пробовать поиграться.
Голубым цветом выделены размеры миниатюр. Для моей демки они отобразились более корректно с таким размером. Если что не устраивает попробуйте поменять их.
В строчки <img src="адрес картинки .jpg"> вставляйте адреса ваших картинок. Ну и готовый код устанавливайте или на статичную страницу, или в тело поста в режиме HTML, или в гаджет. Эффект появится после публикации.
И ещё на один очень важный момент хочу обратить ваше внимание. Сначала напишите сообщение, задайте все настройки и перейдите в режим HTML, в нужном месте установите готовый код. Не возвращаясь в обычный режим, публикуете. После публикации страницы или поста с этой галереей, не стоит больше корректировать этот пост. Установили, опубликовали и всё. Иначе код сломается.
В коде присутствует атрибут tabindex. Это свойство задает порядок вкладок для элементов. Он позволяет использовать кнопку «tab» (или «shift + tab») для переключения между изображениями. Кому интересно подробнее узнать про tabindex - информации много в сети.
Возможно вам понравится и эта галерея.

Фишка галереи в том, что все изображения разбросаны в хаотическом порядке, а при клике кнопкой мыши по определенной миниатюре она увеличивается и одновременно, благодаря стилям анимации, увеличенная миниатюра разворачивается перпендикулярно окну браузера.
Ещё сам код галереи с эффектом увеличения миниатюр очень лёгкий, без подключения библиотек и скриптов. Давайте будем смотреть на тестовом блоге её в рабочем состоянии.
Код.
<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>
<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 - информации много в сети.
Возможно вам понравится и эта галерея.
👇
Получайте новые сообщения с блога прямо на почту
Ух ты! Очень полезно. Запомню, что у Вас есть такой пост, если захочу так оформить статью ))
ОтветитьУдалитьУдобный и оригинальный способ разместить много фото.
ОтветитьУдалитьВикусь! Приветик! Я давно у тебя взяла форму подписки. А сейчас мне пишут, что не отправляет. Не поможешь разобраться? Пишет, что в обозревателе Опера( хотя у меня не опера) отключен источник перехода.Данные блокируются анитивирусником- но я его не меняла или межсетевым экраном . Что к чему? Что делать? Спасибо!
ОтветитьУдалитьПривет, Ирина. Посмотрела через код твой код формы подписки ( если ты имеешь в виду синюю в подвале Библиомир, , то у тебя там стоит адрес моего фида. Скинь мне на почту код этой формы, что - то найти не могу у себя, может удалила эту статью.
ОтветитьУдалитьВик, нет раньше все работало правильно. Тут перебои где то в др месте. Но я вот тут прочитала твою одну ст. и тоже решила установить родной блогеровский гаджет. Меньше проблем будет- ты права. Но вот хотела его перенести на ст. стр, а там кодов нет- устанавливается автоматом
УдалитьИнтересный вариант галереи. Буду знать, где взять код. Спасибочки, Вика, за очередную подсказку.
ОтветитьУдалитьЛюба, когда много фото нужно показать, самое то.
УдалитьВиктория, доброго времени суток. У меня, почему-то, все картинки располагаются вертикально. Причём, первые шесть, чуть развернуты (как и у Вас), а все остальные ровненько одна под одной. В чём может быть причина?
ОтветитьУдалитьВ HTML редакторе всё становится как надо. У меня в блоге все фото одна под другой...
УдалитьЛариса, мне нужно видеть. Как я могу так знать. Возможно стоит размеры картинок поменять. Смотреть надо. И код ваш желательно мне на почту кинуть.
ОтветитьУдалитьИрина, я вот тут тебя не совсем поняла. Но вот хотела его перенести на ст. стр, а там кодов нет- устанавливается автоматом
ОтветитьУдалить