Простая галерея из миниатюр с эффектом увеличения картинки

Всем доброго времени суток. Как сделать простое слайд-шоу или галерею из миниатюр с эффектом увеличения картинки при наведении курсора.

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


Сама я не очень люблю всякие подобные штучки. Но на некоторых блогах это очень даже неплохо смотрится. Зачастую такие галереи устанавливаются с помощью JavaScript. Этот же вариант на чистом CSS. Установить его в Блоггер достаточно легко.

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

<style>.image-container {
position: relative;
width: 640px;
height: 530px;
margin: 0 auto;
text-align:center;
overflow: hidden;
}
.image-container a {
display: inline;
text-decoration: none;
}
/* Стили мини эскизов*/
.mini-thumbnail {
width: 18%; /* размер мини картинки */
margin:1px;
opacity: 1;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
}
/* Стили для главной картинки */
.large-thumbnail {
position: absolute;
width: 100%;
top: 800px;
margin:0 auto;
text-align: center;
display: block;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
}
.feature {
top: 110px;
width: 100%;
opacity: .3;
}
/* стили для мини картинки при наведении */
a:hover .mini-thumbnail {
opacity: .5;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}
/* эффекты перехода.*/
a:hover .large-thumbnail {
top: 110px;
width: 100%;
z-index:3;
opacity: 1;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
}
</style>

<div class="image-container">
<a href="javascript:void(0);">
<img class="mini-thumbnail" src=" адрес ( URL) изображения мини" />
<img class="large-thumbnail" src=" адрес ( URL) изображения большого " />
</a>
<a href="javascript:void(0);">
<img class="mini-thumbnail" src=" адрес ( URL) изображения мини " />
<img class="large-thumbnail" src=" адрес ( URL) изображения большого " />
</a>
<a href="javascript:void(0);">
<img class="mini-thumbnail" src=" адрес ( URL) изображения мини" />
<img class="large-thumbnail" src=" адрес ( URL) изображения большого" />
</a>
<a href="javascript:void(0);">
<img class="mini-thumbnail" src=" адрес ( URL) изображения мини" />
<img class="large-thumbnail" src="адрес ( URL) изображения большого " />
</a>
</div>

Пояснительный текст в стилях CSS можно убрать. Синим цветом я выделила размеры картинки в полную величину. width: 18%;  это размеры мини-картинки. Участок кода такого вида

<a href="javascript:void(0);">
<img class="mini-thumbnail" src=" адрес ( URL) изображения мини" />
<img class="large-thumbnail" src="адрес ( URL) изображения большого " />
</a>

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

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

Делитесь своими фото с друзьями. А у меня сегодня всё. До скорых встреч. Спасибо что читаете мои шпаргалки.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email