[CSS][jQuery] Ciekawa galeria zdjęć z efektem scenicznym

Po dłuższym okresie bez pisania nowych artykułów postanowiłem się z Wami podzielić czymś nowym. Dzisiaj będzie to sposób na ciekawą prezentację zdjęć w galerii. Wyobraźcie sobie ciemną scenę i światło padającego na jednego aktora. Tego typu efekt osiągnięcie podążając śladem tego artykułu.

Zaczynamy od kodu HTML, który jak zwykle nie jest niczym wyszukanym:

<div class="galeria">
    <ul>
    <li><a href="#"><img src="img/logo.jpg" /></a></li>
    <li><a href="#"><img src="img/logo2.jpg" /></a></li>
    <li><a href="#"><img src="img/logo.jpg" /></a></li>
    <li><a href="#"><img src="img/logo2.jpg" /></a></li>
    <li><a href="#"><img src="img/logo2.jpg" /></a></li>
    <li><a href="#"><img src="img/logo.jpg" /></a></li>
    <li><a href="#"><img src="img/logo2.jpg" /></a></li>
    <li><a href="#"><img src="img/logo.jpg" /></a></li>
    <li><a href="#"><img src="img/logo.jpg" /></a></li>
    <li><a href="#"><img src="img/logo2.jpg" /></a></li>
    <li><a href="#"><img src="img/logo.jpg" /></a></li>
    <li><a href="#"><img src="img/logo2.jpg" /></a></li>
    <li><a href="#"><img src="img/logo2.jpg" /></a></li>
    <li><a href="#"><img src="img/logo.jpg" /></a></li>
    <li><a href="#"><img src="img/logo2.jpg" /></a></li>
    <li><a href="#"><img src="img/logo.jpg" /></a></li>
    </ul>
</div>

Następnie dodajemy trochę stylów do naszej galerii:

.galeria ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
.galeria ul li {
	float: left;
}
.galeria ul li a img {
	width: 120px;
	position: relative;
	border: none;
}
.galeria ul li a img.aktywny {
	border: 4px solid #fff;
	z-index: 1;
	left: -4px;
	top: -4px;
}

A na koniec dodajemy skrypt JavaScript opart o bibliotekę jQuery (którą należy też dodać do kodu strony, bo inaczej przykład nie zadziała).

$(window).load(function(){
	var aktor = {
		 // tutaj ustawiamy "przeźroczystość" obrazków
		opacity : 0.2,
		// te zmienne odpowiadają za ustawienie tej samej szerokości i wysokości dla 'li' na podstawie wysokości i szerokości obrazków
		imgWidth : $('.galeria ul li').find('img').width(),
		imgHeight : $('.galeria ul li').find('img').height() 
	};
	// ustawia taką samą wysokość i szerokość pozycji w liście jaką mają obrazki
	$('.galeria ul li').css({ 'width' : aktor.imgWidth, 'height' : aktor.imgHeight });
	// kiedy kursor jest nad pozycją z listy...
	$('.galeria ul li').hover(function(){
		//... znajduje obrazek w tej pozycji i nadaje klasę 'aktywny' i zmienia jego przeźroczystość na 1 (1 to pełna widoczność, a 0 to brak widoczności)
		$(this).find('img').addClass('aktywny').animate({'opacity' : 1}, 100);
		// pobiera inne obrazki z listy i ustawia im przeźroczystość o wartości podanej w atrybutach zmiennej aktor oraz animuje przejścia przeźroczystości
		$(this).siblings('li').find('img').animate({'opacity' : aktor.opacity}, 100)
		// kiedy kursor zmienia położenie ...
	}, function(){
		//... pobierz obrazek z pozcyji opuszczonej i usuń klasę 'aktywny'
		$(this).find('img').removeClass('aktywny');
	});
	// kiedy kursor opuszcza przestrzeń galerii ...
	$('.galeria ul').bind('mouseleave',function(){
		// to zmienia przeźroczystość wszystkich obrazków na 1
		$(this).find('img').animate({'opacity' : 1}, 100);
	});
});

W ten sposób osiągnięcie bardzo fajną galerię, którą będziecie mogli się pochwalić wsyzstkim na swojej stronie 🙂
Demo z tego artykułu znajdziecie tutaj: Galeria zdjęć z efektem scenicznym