Lightbox на чистом CSS3 без JavaScript

Главная › Практические примеры › Lightbox на чистом CSS3 без JavaScript

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

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

Используя CSS переходы и анимацию, мы можем сделать вывод увеличенного изображения различными способами.

Псевдокласс :target позволяет сделать переход к элементу с определенным id. Этим мы и воспользуемся для создания эффекта Lightbox.

Для начала создадим блок миниатюр (один из трех, расположенных на демо-странице).


<div class="cat_block">
  <a href="#cat_1"><img class="cat" src="img/cat_1.jpg" alt="" width="240" height="138"></a>
  <a href="#cat_2"><img class="cat" src="img/cat_2.jpg" alt="" width="240" height="138"></a>
  <a href="#cat_3"><img class="cat" src="img/cat_3.jpg" alt="" width="240" height="138"></a>
  <a href="#cat_4"><img class="cat" src="img/cat_4.jpg" alt="" width="240" height="138"></a>
</div>

Блоку для вывода картинки с большим размером присвоим class= «lb» и id= «cat_1» . Классы и идентификаторы могут иметь любое имя, но чтобы не мудрить использовал lb — Lightbox, и cat, т.к картинки с кошками. Этот блок первоначально спрятан и при клике на картинку выводиться на экран. Ссылка с class== «lb-close» позволяет закрыть большую картинку после просмотра. Блок с class= «lb_p» содержит текст (если это необходимо).

Т.к картинки выводится на экран с различными видами анимации class= «lb» присвоены еще и числовые значения. Если же вывод картинок будет осуществляться одним способом — достаточно одного класса.


<div class="lb" id="cat_1">
   <img src="img/cat_1.jpg" alt="">
   <a href="#" class="lb-close">Закрыть</a>
   <div class="lb_p">
      <p>Без анимации</p>
   </div>
</div> 
<div class="lb_2" id="cat_2">
   <img src="img/cat_2.jpg" alt="">
   <a href="#" class="lb-close">Закрыть</a>
   <div class="lb_p">
      <p>animation: scaleDown</p>
   </div>
</div> 
<div class="lb_3" id="cat_3">
   <img src="img/cat_3.jpg" alt="">
   <a href="#" class="lb-close">Закрыть</a>
   <div class="lb_p">
      <p>animation: fadeInScale</p>
   </div>
</div> 
<div class="lb_4" id="cat_4">
   <img src="img/cat_4.jpg" alt="">
   <a href="#" class="lb-close">Закрыть</a>
   <div class="lb_p">
      <p>animation: rotate</p>
   </div>
</div>

Для <div class= «lb» > прописываем свойство position равное fixed, с нулевой высотой и шириной, а также затемнение основного контента.


.lb{
   width: 0px;
   height: 0px;
   position: fixed;
   overflow: hidden;
   left: 0px;
   top: 0px;
   padding: 0px;
   z-index:1000;
   text-align: center;
 /*затемнение основного контента*/
   opacity:0;
   background: rgba(47,47,56,0.4);       
   transition: opacity 1.2s linear; 
}

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

Для картинок прописываем:


.lb img {
   max-height: 100%;
   position: relative;
   opacity:1;
/* оформление на свой вкус*/
   border:3px solid #ccc;
   box-shadow: 0px 0px 8px #333;
}

Текст под картинкой:


.lb > .lb_p{
   position: relative;
   opacity:0;
 /* оформление на свой вкус*/
   width: 550px;
   margin:10px auto 0px auto;
   transition: opacity 0.3s linear 1.3s;
}

Ссылка «Закрыть»:


.lb a.lb-close {
   display: block;
   position:absolute;
   z-index: 1001;
 /* оформление на свой вкус*/ 
   top:131px;
   left:46%;
   width:100px;
   text-transform: uppercase;
   font-size: 14px;
   font-weight: 400;
   overflow:hidden;
   opacity: 0;
   transition: opacity  0.5s 1.5s;
}

Ссылка-якорь в миниатюрах ihref= «#cat-1» указывает на элемент c id= «#cat-1» , который представляет собой <div class= «lb» id= «cat_1» > . Для вывода картинки на экран используем псевдоэлемент :target.


/*вывод блока "под картинку" */
.lb:target {
   width: auto;
   height: auto;
   bottom: 0px;
   right: 0px;
   padding: 175px 100px 120px 100px;
}

/* вывод картинки  без анимации */
.lb:target img,
.lb:target a.lb-close,
.lb:target >.lb_p {
   opacity: 1;
}  
 
  /* вывод картинки с анимацией*/

.lb_2:target img {
	animation: scaleDown 1.2s ease-in-out;
}
.lb_2:target a.lb-close,
.lb_2:target,
.lb_2:target >.lb_p {
	opacity: 1;
}
@keyframes scaleDown {
  0% { transform: scale(10,10); opacity: 0; }
  100% { transform: scale(1,1); opacity: 1; }
}

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