Главная » Уроки » Лайтбокс эффект с помощью магии CSS3

Лайтбокс эффект с помощью магии CSS3

Лайтбокс эффект с помощью магии CSS3

Здравствуйте друзья! Надеюсь всем знаком такой замечательный эффект, как (), используемый для отображения изображений большего размера на страницах сайтов. Существует множество специальных плагинов, хороших и не очень, построенных на jQuery. Меня в свое время заинтересовала возможность создания лайтбокс эффекта без применения javascript, построить работу исключительно на функциях , благо что современные браузеры, за исключением некоторых, поддерживают новые стандарты.
Сегодня хочу рассказать и показать на примере, как с помощью «магии» CSS3 можно быстро и без особых проблем, создать простой, но от этого не менее интересный, лайтбокс эффект для полномасштабных изображений.

Для начала, в наличии у нас должно быть два (необязательно совсем), одно оригинального размера (image1-big.jpg), другое — его уменьшенная копия (миниатюра image1.jpg). Миниатюру расположим в виде анкора ссылки с параметром href="#image1":

<a href="#image1"><img src="http://yoursite.ru/images/image1.jpg" alt=""/></a>

 
Параметр href очень важен, так как это будет именно тот параметр, который свяжет нашу маленькую картинку с увеличенным изображением. Ссылке ведущей на открытие полноразмерного изображения мы присвоим идентификатор с таким же именем, как у нашей миниатюры. Незабываем так же прописать класс(class), который сыграет ключевую роль в оформлении вывода увеличенной картинки на странице. В html это будет выглядеть следующим образом:

<a href="#close" id="image1" class="lbox"><img src="http://yoursite.ru/images/image1-big.jpg" alt=""/></a>

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

<a href="#image1"><img title=""src="http://yoursite.ru/images/yourimage.jpg" width="120" height="120" alt="" /></a>
<a href="#close" id="image1" class="lbox"><img title="" src="http://yoursite.ru/images/yourimage.jpg" alt=""/></a>

Вот так, теперь на странице у нас будет выводиться миниатюра размером 120 x 120px, а при нажатии на нее мы увидим изображение реального размера, с замечательным эффектом затемнения.
Как говориться, шире — далее, можно с помощью CSS совсем избавить себя от рутинных задач и размер миниатюр задать непосредственно в стилях, в селектор img добавить width и height с нужными вам параметрами, в нашем случае, это будет width: 120px; и height: 120px; соответственно.
 

img {
margin: 0 10px 0 0;
border: 3px solid #ccc;
width: 120px; height: 120px; /* высота и ширина миниатюры */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
box-shadow: 2px 2px 6px rgba(0, 0, 0, .6);
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, .6);
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, .6);
}

 
Чтобы полномасштабное изображение не унаследовало параметры миниатюр, а выводилось корректно в полном, или необходимом вам размере, следует в классе .lbox img указать width: auto; height: auto;, или же выставить свой размер увеличенной картинки. Тем самым мы избавимся от необходимости каждый раз прописывать атрибуты изображений в коде html, при формировании галереи или вставке картинки в запись, да и сам код в этом случае выглядит проще:

<a href="#image1"><img title=""src="http://yoursite.ru/images/yourimage.jpg"  alt="" /></a>
<a href="#close" id="image1" class="lbox"><img title="" src="http://yoursite.ru/images/yourimage.jpg" alt=""/></a>

 
Обратите внимание на class="lbox", имя присвоено мною от фонаря, можете прописать свое, главное чтобы оно соответствовало классу стиля в css. Таким образом мы тихо-мирно подобрались к стилям CSS нашего лайтбокс-эффекта. Здесь получилось все довольно просто, без излишних наворотов весь код css эффекта выглядит примерно так:

.lbox {
width: 0;
height: 0;
position: fixed;
overflow: hidden;
left: 0;
top: 0;
z-index: 99999;
text-align: center;
background: rgba(0,0,0,0.7);
}
.lbox img {
opacity: 0;
padding: 8px;
background: #ffffff;
margin-top: 100px;
width: auto; height: auto; /* высота и ширина масштабной картинки */
    /* скругяем углы и добавляем тень */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 2px solid #ccc;
-moz-box-shadow: 5px 5px 10px #000, -5px -5px 10px #000;
-webkit-box-shadow: 5px 5px 10px #000, -5px -5px 10px #000;
box-shadow: 5px 5px 10px #000, -5px -5px 10px #000;
	/* трансформации прозрачности при открытии  */
-webkit-transition: opacity 250ms ease-in;
-moz-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;		
}
/* показываем окно с содержанием */
.lbox:target {
width: auto;
height: auto;
bottom: 0;
right: 0;
}
.lbox:target img {
opacity: 1;
}

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

Да, и не забывайте, что эффект лайтбокса будет корректно работать только в следующих браузерах:

  • Firefox 1.0+
  • Safari 3.1+
  • Opera 9.5+
  • Chrome 2+
  • IE 9+ — наконец то снялись с ручника)))

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

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

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

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

3 комментария
  1. Armeez_ReaL says:

    спасибо большое!

    Ответить
  2. kontaktle says:

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

    Ответить
  3. Огромное спасибо за мануал!!! 2 недели искала, как реализовать ЛайтВокс с помощью ксс

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

Отправляя к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