Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

Адаптивный Lightbox Эффект на чистом CSS3

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

Время не стоит на месте, стандарты, требования веб-разработки и дизайна меняются, пришло время немного подкорректировать некоторые свойства эффекта, добавив к нему новые функции.
По большому счёту особо ничего менять не пришлось, разве что подключил чуть более плавную трансформацию при проявлении картинок, да добавил правила @media для различных типов пользовательских устройств, адаптивный дизайн видите ли нынче в моде…
 
Адаптивный Lightbox Эффект CSS3
 
Итак, для начала, как всегда можете посмотреть на эффект в деле, поизменять размеры окна браузера, взглянуть на исходники, а затем более подробно разберём некоторые детали.
Сразу хочу отметить, что корректно и в полном объёме данный метод работает в браузерах поддерживающих псевдокласс :target(на нём собственно весь эффект и основан) это Firefox 1.0+, Chrome 1.0+, Opera 9.6+, Safari 3.0+ и Internet Explorer 9.0+, пользователи плотно подсевшие на IE 8, к сожалению ничего не увидят.

А может и это вам будет интересно:

Изначально, для скрытия и появления картинок полного размера использовал свойства display:none и display:block, но в таком случае картинки проявлялись мгновенно без какой-либо задержки. Чтобы создать визуальную иллюзию анимации при появлении изображений полного размера, заменил скрытие элемента на свойство прозрачности opacity: 0;.
В сущности данное свойство выполняет тоже самое, скрывает элемент на странице, делая его невидимым, но в связке с универсальным свойством transition:, можно регулировать эффект перехода между двумя состояниями элемента, это и есть своеобразный анимационный эффект.

Как и прежде, для начала нам потребуются миниатюры, создавать для этого отдельные картинки с меньшим размером совсем необязательно, так же отказался от использования указания фиксированной ширины width="100px" в самом теге картинки <img>. Достаточно при формировании стилей в css указать значения в процентах для свойств max-width: и max-height:, определяющих размеры будущей миниатюры в зависимости от размеров блока в котором они будут размещены. Очень гибкое и удобное решение, избавляющее от необходимости каждый раз в тегах картинок прописывать размеры.
И так, создаем миниатюры, окружаем их ссылками с атрибутом href, точно соответствующим идентификатору id ссылок изображений в оригинальном размере, помещаем их в любой контейнер, в моём случае это специально созданный div с классом thumb, и получаем в итоге, вот такую несложную конструкцию в html:

<div class="thumb">
  <a href="#img1">
    <img src="img/img1.jpg">
  </a>
  <a href="#img2">
    <img src="img/img2.jpg">
  </a>
  <a href="#img3">
    <img src="img/img3.jpg">
  </a>
  <a href="#img4">
    <img src="img/img4.jpg">
  </a>
  <a href="#img5">
    <img src="img/img5.jpg">
  </a>
  <a href="#img6">
    <img src="img/img6.jpg">
  </a>
</div>

Затем на необходимо организовать ссылки на изображения реального размера со всеми нужными атрибутами для активации эффекта. Для этого достаточно ссылке картинки присвоить id связывающий её с адресом href ссылки миниатюры и прописать класс class=”lightbox” для связки с классом css, с помощью значений свойств которого, и будет активироваться наш замечательный эффект Lightbox при нажатии на выбранную миниатюру.

<a href="#close" class="lightbox" id="img1">
   <img src="img/img1.jpg">
</a>
<a href="#close" class="lightbox" id="img2">
   <img src="img/img2.jpg">
</a>
<a href="#close" class="lightbox" id="img3">
   <img src="img/img3.jpg">
</a>
<a href="#close" class="lightbox" id="img4">
   <img src="img/img4.jpg">
</a>
<a href="#close" class="lightbox" id="img5">
    <img src="img/img5.jpg">
</a>
<a href="#close" class="lightbox" id="img6">
     <img src="img/img6.jpg">
</a>

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

Эффект реализован благодаря псевдоклассу :target. То есть, если изначально для изображений с классом lightbox в стилях мы определили значение для свойства прозрачности opacity: 0;, тем самым визуально скрыв полно-размерные картинки на время, то определив правило с псевдоклассом :target для этих самых картинок, то по клику на миниатюре, происходит изменение значений высоты и ширины на максимальную, а изображение становится видимым благодаря изменению значения свойства opacity: 1;

Остаётся добавить некоторую плавность перехода от одного состояния изображений к другому с помощью свойства transition:, в примере выставил значение 500ms, в результате прозрачность изменяется не мгновенно, а с задержкой в пол секунды.
В итоге у нас получился довольно легкий и вполне понятный исполняемый код CSS, с помощью которого в будущем вам не составит особого труда изменить любые параметры самого эффекта, и параметры выводимых картинок. А небольшие мои пояснения, помогут вам быстрее разобраться что, куда и зачем

 a img {
    border: none; /* убираем рамку */
   }
.lightbox {
/** определяем базовый стиль lightbox */
  position: fixed;
  overflow: hidden;
  z-index: 9999;
  width: 0;
  height: 0;
  text-align: center;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.8);
}
.lightbox img {
/** базовый стиль изображений lightbox*/
  width: 95%;
  max-width: 800px;
  height: auto;
  margin: 5% auto;
/** полная прозрачность изначально */
  opacity: 0;
  border: 1px solid #4D4D4D;
/** тени у картинок - это по желанию */
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
/* трансформация прозрачности при открытии  */
  -webkit-transition: opacity 500ms ease-in;
  -moz-transition: opacity 500ms ease-in;
  transition: opacity 500ms ease-in;  
}
.lightbox:target {
/** активируем lightbox при нажатии */
  width: auto;
  height: auto;
  bottom: 0;
  right: 0;
/** удаляем контур по умолчанию */
  outline: none;
}
.lightbox:target img {
/** делаем элемент непрозрачным  */
  opacity: 1;
}
/** стиль миниатюр для демо-страницы */
.thumb img{
  width: 45%;
  margin:2%;
  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.6);
}

Вот и всё! Интереснейший эффект «Lightbox» готов к работе. Всё хорошо, только огорчает тот факт, что в полной мере, данный метод на чистом CSS3, использовать пока всё же преждевременно, учитывая, что всё еще популярный среди пользователей браузер IE8, лишен поддержки некоторых свойств CSS3.
Мне например, каждый раз так и хочется, забить на сей прискорбный факт и развернуться по полной, использовать без постоянной оглядки на этот недобраузер, всю мощь CSS3, но реалии диктуют свои правила и пока приходится искать компромиссные решения.

Еще раз смотрим живой пример, забираем архив с исходниками с моего Яндекс.Диска, кому оно надо конечно, и творим, творим, творим…

С Уважением, Андрей

Буду признателен, если поделитесь ссылкой на запись в своих соц-сетях:

Всего комментариев: 14

  • NeedHate: 7 февраля, 2014 в 14:25

    Привет. Подскажите пожалуйста: при закрытии лайтбокса, страничка переходит сразу же в топ страницы. Как ее оставить на том же уровне? спасибо.

    Ответить
    • driver: 7 февраля, 2014 в 17:48

      Спасибо за наводку, совсем из виду упустил. Дело в том что полноразмерные картинки обернуты ссылкой с href="#", что само собой даёт команду браузерам на переход вверх страницы, при закрытии. Косяк не большой, но заметный, а стало быть его необходимо исправить.
      Всё очень просто, достаточно в href=”/” больших картинок прописать href="#close" и вас не будет выкидывать наверх страницы.
      Удачи!

      Ответить
      • NeedHate: 7 февраля, 2014 в 18:19

        Пффф… спасибо! Оно!

        Ответить
      • NeedHate: 8 февраля, 2014 в 02:56

        Вопрос за вопросом: у меня есть фото, но к нему я хочу добавить еще и текст, т.е. выпадает лайтбокс, а справа/слева от изображения у меня текст. как это сделать?
        Еще вопрос (слегка не в тему). Как вы делаете вот этот маленький но эффектный фон/шрифт/окантовку «transition:/target:» ? Хотел бы подписывать комментарии к фото именно в таком стиле.

        Ответить
  • Olmaz: 28 февраля, 2014 в 00:09

    Спасибо, все работает. Только сегодня нашла вас в инете и уже воспользовалась 2-мя статьями (модальное окно и lightbox). В статьях написано все понятно, четко и по-делу. Буду пользоваться вашими статьями и в будущем)))))

    Ответить
    • driver: 28 февраля, 2014 в 00:15

      Очень рад, что вам пригодилось.

      Ответить
  • Igor: 4 октября, 2015 в 19:46

    Скажите, а как добавить трансформацию прозрачности при закрытии?

    Ответить
  • Пудж: 9 декабря, 2015 в 20:31

    Жаль что все картинки грузятся сразу в большом разрешении, и просто ужимаются в масштабе для превью.

    Ответить
    • driver: 9 декабря, 2015 в 21:37

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

      Ответить
  • enfect3d: 1 декабря, 2017 в 20:05

    Есть кто живой?При наведении на изображение появляется «-» справа от него…

    Ответить
    • driver: 1 декабря, 2017 в 21:44

      Все живы!
      В демо ничего лишнего не появляется при наведении ни на миниатюру, ни на полноразмерную картинку. Можно немного точнее сформулировать вопрос? И уверяю вас, все кто жив, вам обязательно помогут…

      Ответить
  • Александр: 8 декабря, 2017 в 08:19

    Спасибо большое! Я искал именно это примерно 2 дня. Вы меня очень сильно спасли. У меня вопрос: вы не планируете делать видео с описанием тех или иных решений подобно этому? Чтобы более детально описать ход действий. Я, как начинающий, очень часто пользуюсь видеоматериалами — там очень подробно описывают некоторые моменты и становится понятно откуда что берется.
    Ещё раз спасибо за данный материал.

    Ответить
  • sergo: 29 июля, 2018 в 22:30

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

    Ответить

Оставить комментарий

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>