[CSS][jQuery] Ciekawa galeria zdjęć z efektem scenicznym
This post is 16 years old. Browsers and tools may have changed since then, so check the code against current documentation before you use it.
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
About the author
