Проста галерея на стилях без використання скриптів

: Різне; 11. 03. 2016; 1020

Нещодавно довелося робити галерею зображень товару для одного сайту. Переглянувши посилання на побажання замовника, я дійшов висновку що зроблю галерею на самих стилях CSS без використання скриптів.

Для виконання цього задуму нам знадобиться ключовий елемент, статус якого може змінити клік користувача. І цей елемент повинен мати у своєму підпорядкуванні інший елемент. Таким чином при зміні статусу елента користувачем ми можемо змінити CSS як батьківського, так і підпорядкованого йому елемента. Таким елементом я обрав <input type="radio">, який має у свєму підпорядкуванні <label>.

З елементами розібралися. Тепер приступимо до архітектури.

В якості основного контейнеру галереї я обрав звичайний <div>, а роль "несучої конструкції" виконав <ul>.

Так виглядає моя галерея на сайті замовника

Ось і сама архітектура галереї:

<div id="gallery">
        <img  id="zero" src="images/zero.gif">
        <ul class="gallery">
            <li>
                <input type="radio" id="pic-1" name="pict"  checked />
                <label  for="pic-1"  style="background-image:url(/images/site/homepage/slides/wdlo7c/wdlo-7c.jpg);"><img  src="/images/site/homepage/slides/wdlo7c/wdlo-7c.jpg"/><span>WDLO-7C</span></label>
                <input  type="radio"  id="pic-2"  name="pict" />
                <label  for="pic-2"  style="background-image:url(/images/site/homepage/slides/wdlo7c/wdlo-7c-u.jpg);"><img  src="/images/site/homepage/slides/wdlo7c/wdlo-7c-u.jpg"/><span>WDLO-7C UV</span></label>
                <input  type="radio" id="pic-3" name="pict" />
                <label  for="pic-3"  style="background-image:url(/images/site/homepage/slides/wdlo7c/wdlo-7c-n.jpg);"><img  src="/images/site/homepage/slides/wdlo7c/wdlo-7c-n.jpg"/><span>WDLO-7C  night</span></label>
            </li>
        </ul>
    </div>

А ось стилі які перетворюють вищенаведений скелет на доволі непогану галерею.

#gallery {
float:left;
width:590px;
height:600px;
position:relative;
}
ul.gallery {
display:block;
float:left;
width:590px;
height:auto;
list-style:none;
margin:0;
padding:0;
}
ul.gallery>li {
display:block;
float:left;
width:120px;
height:auto;
}
input[type="radio"],label[for]>span {
display: none;
}
label[for] {
display:block;
width:55px;
height:73px;
cursor:pointer;
background-position:center;
background-size:51px 69px;
background-repeat:no-repeat;
margin:0 auto 20px auto;
border:solid 1px #d4d4d4;
box-shadow:0 0 9px rgba(0,0,0,0.3);
border-radius:4px;
}
label[for]>img {
width:0px;
height:0px;
}
input[type="radio"]:checked+label[for] {
cursor:default;
border:solid 1px #333;
}
input[type="radio"]:checked+label[for]>img {
display:block;
position:absolute;
top:0px;
left:120px;
width:447px;
height:594px;
border:solid 1px #d4d4d4;
padding:2px;
}
input[type="radio"]:checked+label[for]>span {
display:table-cell;
position:absolute;
top:20px;
left:120px;
width:auto;
height:20px;
color:#fff;
background-color:orange;
text-align:center;
z-index:25;
font-size:16px;
vertical-align:middle;
padding:5px 25px;
}
img#zero {
display:block;
position:absolute;
top:0px;
left:120px;
width:452px;
height:600px;
z-index:30;
}