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


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

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


Сама я не очень люблю всякие подобные штучки. Но на некоторых блогах это очень даже неплохо смотрится. Зачастую такие галереи устанавливаются с помощью 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


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

  1. Интересно, обязательно поробую. Уже есть вопросы, но думаю задам, если сама не разберусь. Пока нет времени, я ж теперь в первом классе учусь!)

    ОтветитьУдалить
  2. Попробуй, обязательно. Вот только не проси активные ссылки или описание. Это другая история.

    ОтветитьУдалить
  3. Интересно, возьму на заметку.

    ОтветитьУдалить
    Ответы
    1. sertifok, рада. что Вас это заинтересовало.

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

    ОтветитьУдалить
    Ответы
    1. Напихала значит уже лишнего, или что-то другое сделала. Добавляла или меняла стили для картинок. Сам код по себе очень гибкий и лёгкий. Возможно уже был использован класс image-container

      Удалить
  5. Я сразу попробовала вставить твой код, как он есть, в тестовый блог, который по подобию моего, там он не правильно работает, как и в основном блоге, а в другом шаблоне все отлично.

    ОтветитьУдалить
    Ответы
    1. Олеся, ну где-то уже применены стили для изображения значит.

      Удалить
  6. Вот о чем я https://yadi.sk/i/jh-stQt_j48SL
    https://yadi.sk/i/FC7Hw_BSj48SQ

    ОтветитьУдалить
  7. Добрый день! Спасибо за адрес вашего блога и за теплые слова поддержки! Спасибо!

    ОтветитьУдалить
    Ответы
    1. Юля, рада вас видеть. Присоединяйтесь к нам. Я знаю, что у Вас пока есть затруднения. Вместе разберёмся.
      Внизу есть гаджет Постоянные читатели. Нажимаете строку присоединится к сайту и дальше всё понятно.

      Удалить

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