[CSS][jQuery] Ciekawa galeria zdjęć z efektem scenicznym
Ten wpis ma 16 lat. Od tego czasu przeglądarki i narzędzia mogły się zmienić, więc zanim użyjesz kodu, sprawdź go z aktualną dokumentacją.
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>.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;
}
$(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);
});
});
Demo z tego artykułu znajdziecie tutaj: Galeria zdjęć z efektem scenicznym
O autorze
