Galeria w css3 i javascript
W tym tutorialu pokażę jak stworzyć w css3 i javascript ciekawą kółkową galerię zdjęć. Kod html wygląda następująco
<div class="photos"> <div id="photo1" class="photo"><a href="images/285666_5142.jpg"></a></div> <div id="photo2" class="photo"><a href="images/837925_57143594.jpg"></a></div> <div id="photo3" class="photo"><a href="images/864465_43298257.jpg"></a></div> </div> <div class="popup_lightbox"> <a href="#" id="close_popup"><img src="images/close.png" alt="X" /></a> </div> <div id="overlay"></div>W pojemniku o klasie photos znajdują się trzy kolejne divy każdy o klasie photo z naszymi zdjęciami. W divie o klasie popup_lightbox będziemy pokazywać powiększone zdjęcie, natomiast pojemnik o klasie overlay to tzw. wyciemnienie tła w trakcie pokazywania powiększonego zdjęcia. Teraz zajmiemy się stylami css. Każdy div o klasie photo pozycjonujemy relatywnie i nadajemy mu styl float. Ponadto aby zmienić go w kółko dodajemy styl css3 border-radius. Każdy z divów (o id photo1, photo2 itd.) będzie miał ustawione tło na odpowiednie zdjęcie. Div o klasie popup_lightbox na razie ma ustawiony display: none, ponieważ będziemy go pokazywać po kliknięciu. Ustawiamy mu również border-radius, dzięki temu zdjęcie powiększone będzie większym kołem. Kliknięty div będzie miał przypisaną klasę popup_active.
body {
background-color:#131110;
}
div.photo {
float:left;
width:149px;
height:148px;
margin:12px;
position:relative;
border: 1px solid transparent;
-moz-border-radius: 105px;
-webkit-border-radius: 105px;
border-radius: 105px;
}
div.photo a {
width:150px;
height:150px;
display:block;
}
div.photo * img {
width:170px;
height:170px;
display:block;
}
div#photo1 {
background: url("../images/285666_sokolnica.jpg") no-repeat center;
}
div#photo2 {
background: url("../images/837925_nice_view_in_the_mountains.jpg") no-repeat center;
}
div#photo3 {
background: url("../images/864465_mountain_view.jpg") no-repeat center;
}
div#overlay {
display:none;
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 100%;
height:100%;
background:black;
opacity:0.7;
display: none;
filter: alpha(opacity = 70);
}
div.popup_lightbox {
display:none;
padding:10px;
position:relative;
border: 1px solid transparent;
-moz-border-radius: 1205px;
-webkit-border-radius: 1205px;
border-radius: 1205px;
}
#close_popup {
float:right;
margin:45px 45px 0 0;
}
div.popup_active {
display:block;
background: none repeat scroll 0 0 white;
border: 20px solid white;
left: 50%;
margin-left: -400px;
position: fixed;
top: 8%;
width: 650px;
height:650px;
z-index: 100;
}
Pozostaje już tylko kod javascript, a dokładniej użyjemy biblioteki jQuery.
$(document).ready(function() {
var obrazek_duzy;
$('div.photo a').click(function() {
$('div.popup_lightbox').addClass('popup_active');
$('div#overlay').css('display','block');
obrazek_duzy = $(this).attr('href');
$('div.popup_lightbox').css('background','url('+obrazek_duzy+')');
return false;
});
$('#close_popup').click(function() {
$('div.popup_lightbox').removeClass('popup_active');
$('div#overlay').css('display','none');
$('div.popup_lightbox').css('background','none');
return false;
});
});