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;
	});
});
Jak widać zadeklarowaliśmy zmienną globalną obrazek_duzy, która będzie przechowywała url do aktualnie wyświetlanego dużego obrazka. Przypisujemy zdarzenie click do elementu a wewnątrz diva o klasie photo. Po kliknięciu nadajemy popupowi klasę popup_active, pokazujemy również overlay. Następnie do zmiennej obrazek_duzy przypisujemy url z atrybutu href linka. Potem ustawiamy popupowi odpowiednie tło. Pozostało tylko oskryptowanie przycisku zamykania popupa (element o id close_popup). Po kliknięciu na niego usuwamy klasę popup_active z popupa, ukrywamy div overlay oraz ustawiamy background na none dla popupa.