Главная » Уроки » Lightbox Эффект CSS3

Lightbox Эффект CSS3

Lightbox Эффект CSS3

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

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

Итак, для начала, как всегда можете посмотреть на эффект в деле, поизменять размеры окна браузера, взглянуть на исходники, а затем более подробно разберём некоторые детали.
Сразу хочу отметить, что корректно и в полном объёме данный метод работает в браузерах поддерживающих псевдокласс :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, но реалии диктуют свои правила и пока приходится искать компромиссные решения.

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

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

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

12 комментариев
  1. NeedHate:

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

    Ответить
    • driver:

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

      Всё очень просто, достаточно в href="" больших картинок прописать href="#close" и вас не будет выкидывать наверх страницы.

      Удачи!

      Ответить
      • NeedHate:

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

        Ответить
      • NeedHate:

        Вопрос за вопросом: у меня есть фото, но к нему я хочу добавить еще и текст, т.е. выпадает лайтбокс, а справа/слева от изображения у меня текст. как это сделать?

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

        Ответить
        • driver:

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

          По второму вопросу — так оформлен у меня вывод отрывков кода в теге code, ничего особенного, фон, шрифт и рамка:

          background: none repeat scroll 0 0 #F7F7F9;
          border: 1px solid #E1E1E8;
          border-radius: 3px;
          color: #468847;
          font-family: Monaco,Menlo,Consolas,"Courier New",monospace;
          font-size: 12px;
          line-height: 22px;
          padding: 0 3px;
          text-shadow: 1px 1px #FFFFFF;

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

  2. Olmaz:

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

    Ответить
  3. Igor:

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

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

    Ответить
    • driver:

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

      Ответить
  5. enfect3d:

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

    Ответить
    • driver:

      Все живы!

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

      Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru