Лайтбокс эффект с помощью магии CSS3 - CSS
Для начала, в наличии у нас должно быть два изображения (необязательно совсем), одно оригинального размера (image1-big.jpg), другое — его уменьшенная копия (миниатюра image1.jpg). Миниатюру расположим в виде анкора ссылки с параметром href="#image1":
Параметр href очень важен, так как это будет именно тот параметр, который свяжет нашу маленькую картинку с увеличенным изображением. Ссылке ведущей на открытие полноразмерного изображения мы присвоим идентификатор с таким же именем, как у нашей миниатюры. Незабываем так же прописать класс(class), который сыграет ключевую роль в оформлении вывода увеличенной картинки на странице. В html это будет выглядеть следующим образом:
Можно обойтись и одной картинкой, то есть не обязательно создавать миниатюру для оригинального изображения, необходимо просто при выводе миниатюры установить нужную ширину «width» и соответственно высоту «height» уменьшенной копии. Тем самым мы избежим путаницы и излишних телодвижений при раскладке непосредственно в html коде страницы, да и лишняя картинка, это опять же, расточительное использование дискового пространства. Для меня больше привлекателен именно такой способ:
Вот так, теперь на странице у нас будет выводиться миниатюра размером 120 x 120px, а при нажатии на нее мы увидим изображение реального размера, с замечательным эффектом затемнения.
Обратите внимание на параметр class="lbox", имя присвоено мною от фонаря, можете прописать свое, главное чтобы оно соответствовало классу стиля в css. Таким образом мы тихо-мирно подобрались к стилям CSS нашего лайтбокс-эффекта. Здесь получилось все довольно просто, без излишних наворотов весь код css эффекта выглядит примерно так:
Вот и все, наш замечательный лайтбокс-эффект готов, кто хоть немного знаком с CSS, разберется с параметрами и при необходимости, экспериментируя, а может и методом «тыка», создаст что-нибудь свое, более интересное. А эта моя статья лишь небольшой пример того, что можно сделать с помощью волшебных свойств магии CSS3.
Код
<a href="#image1"><img src="http://yoursite.ru/images/image1.jpg" alt=""/></a>
Параметр href очень важен, так как это будет именно тот параметр, который свяжет нашу маленькую картинку с увеличенным изображением. Ссылке ведущей на открытие полноразмерного изображения мы присвоим идентификатор с таким же именем, как у нашей миниатюры. Незабываем так же прописать класс(class), который сыграет ключевую роль в оформлении вывода увеличенной картинки на странице. В html это будет выглядеть следующим образом:
Код
<a href="#" 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="#" id="image1" class="lbox"><img title="" src="http://yoursite.ru/images/yourimage.jpg" alt=""/></a>
<a href="#" id="image1" class="lbox"><img title="" src="http://yoursite.ru/images/yourimage.jpg" alt=""/></a>
Вот так, теперь на странице у нас будет выводиться миниатюра размером 120 x 120px, а при нажатии на нее мы увидим изображение реального размера, с замечательным эффектом затемнения.
Обратите внимание на параметр 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;
/* Закругляем углы и добавляем тень */
-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;
}
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;
/* Закругляем углы и добавляем тень */
-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.
Всего комментариев: 0 | |
Информация: Посетители, находящиеся в группе Гости, не могут оставлять комментарии. |