Сегодня я покажу вам как сделать галерею изображений на CSS3. Галерея будет представлять собой набор эскизов, при наведении курсора на которые их размер будет увеличиваться, а основное изображение будет меняется в зависимости от того, какая миниатюра была нажата.
HTML
Итак, во-первых, нам понадобится несложная HTML-разметка.
<div id="images"> <section id="thumbnails"> </section> <section id="mainimage"> <div id="imageplaceholder"></div> </section> </div>
Там есть основной DIV с id "images". Этот блок вроде контейнера, который содержит весь контент на странице. Кроме того, там есть секция "thumbnails" - она содержит миниатюры. Далее идет div "mainimage". Он содержит основное изображение, которое изменяется в зависимости от того по какой миниатюре кликнули. Внутри "mainimage" находится блок с id "imageplaceholder". Этот блок содержит изображение по-умолчанию.
<section id="thumbnails"> <div class="image"> <a href="#test1"> <img src="images/test1.jpg"> </a> </a> </div> <div class="image"> <a href="#test2"> <img src="images/test2.jpg"> </a> </div> <div class="image"> <a href="#test3"> <img src="images/test3.jpg"> </a> </div> <div class="image"> <a href="#test4"> <img src="images/test4.jpg"> </a> </div> <div class="image"> <a href="#test5"> <img src="images/test5.jpg"> </a> </div> <div class="image"> <a href="#test6"> <img src="images/test6.jpg"> </a> </div> <div class="image"> <a href="#test7"> <img src="images/test7.jpg"> </a> </div> <div class="image"> <a href="#test8"> <img src="images/test8.jpg"> </a> </div> <div class="image"> <a href="#test9"> <img src="images/test9.jpg"> </a> </div> </section>
Да, тут много эскизов. Но что это за галерея изображений, которая обходится без множества эскизов? Теперь, обратите внимание на то, что там есть ссылка на каждую миниатюру, в виде #test, а затем номер. Это нужно затем, что мы будем использовать псевдо-селектор ":target".
<section id="mainimage"> <div id="test1"> <div id="test2"> <div id="test3"> <div id="test4"> <div id="test5"> <div id="test6"> <div id="test7"> <div id="test8"> <div id="test9"> <div id="imageplaceholder"></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </section>
Да, это выглядит не очень красиво, я признаю, - но я и не говорил, что это будет семантический код, не так ли? Каждый DIV имеет id "test", а затем номер. Этот id соответствует "href" в ссылке миниатюры.
Теперь, когда мы закончили с простым и совершенно несложным HTML, давайте двигаться дальше.
CSS3
Вначале вставим reset-стили Эрика Мейера. После того как вы сделали это, перейдем непосредственно к галерее.
body {
background: #f8f8f8;
font-size: 15px;
line-height: 25px;
color: #515151;
}
#images {
padding-top: 100px;
width: 880px;
height: 440px;
margin: 0 auto;
}
#thumbnails {
float: left;
width: 440px;
margin-top: 20px;
}
#mainimage {
float: right;
width: 430px;
height: 430px;
background: #ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 3px 1px #989898;
-moz-box-shadow: 0px 0px 3px 1px #989898;
box-shadow: 0px 0px 3px 1px #989898;
padding: 5px;
}
#mainimage img {
width: 430px;
height: 430px;
}Это был основной дизайн макета. Он имеет ширину 880px, а оба раздела по 440px.
.image {
opacity: 0.8;
position: relative;
float: left;
background: #ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 3px 1px #989898;
-moz-box-shadow: 0px 0px 3px 1px #989898;
box-shadow: 0px 0px 3px 1px #989898;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
padding: 5px;
width:90px;
height: 90px;
margin-left: 15px;
margin-right: 15px;
margin-top: 15px;
margin-bottom: 15px;
}
.image img {
width: 90px;
height: 90px;
}
.image:hover {
cursor: pointer;
opacity: 1;
z-index: 5;
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}Эти стили касаются миниатюр. Однако, кроме переходов, наиболее важной частью являются стили при наведении курсора. Обратите внимание, на CSS3-transform. Здесь мы используем масштабирование, которое увеличивает элемент в полтора раза при наведении мыши.
#imageplaceholder {
background: url('images/test1.jpg');
background-size: 100%;
width: 430px;
height: 430px;
}Это стили для фонового изображения, которое будет меняться в зависимости от того, какая миниатюра была нажата.
#test1:target #imageplaceholder{
background: url('images/test1.jpg');
}
#test2:target #imageplaceholder{
background: url('images/test2.jpg');
}
#test3:target #imageplaceholder{
background: url('images/test3.jpg');
}
#test4:target #imageplaceholder{
background: url('images/test4.jpg');
}
#test5:target #imageplaceholder{
background: url('images/test5.jpg');
}
#test6:target #imageplaceholder{
background: url('images/test6.jpg');
}
#test7:target #imageplaceholder{
background: url('images/test7.jpg');
}
#test8:target #imageplaceholder{
background: url('images/test8.jpg');
}
#test9:target #imageplaceholder{
background: url('images/test9.jpg');
}Когда мы кликаем по миниатюре, "#test" с номером добавляются к URL-адресу. CSS3 селектор ":target" проверяет URL, и когда URL содержит имя элемента с селектором ":target", соответствующие стили применяются и меняется фоновое изображение.
Скачать исходники:
- Подпись автора