CSS3 фото-галерея

Главная

Статьи

Верстка сайтов

CSS3 фото-галерея

01.01.2012 00:00

CSS3 фото-галерея

Сегодня я покажу вам как сделать галерею изображений на 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", соответствующие стили применяются и меняется фоновое изображение.

Вот и все. Надеюсь, вам понравился эта статья, и если у вас есть какие-либо вопросы или комментарии, не стесняйтесь и пишите комментарии ниже.