[PHP][jQuery] Ściana obrazków – obrazki z niespodzianką

Dzisiejszy tutorial będzie dotyczył efektownej ściany obrazków. Taka ściana może być wykorzystana w wielu celach np: jako galeria zdjęć, galeria prac do portfolio czy też jako ściana z reklamami na blogu.
Aby zbudować taką ścianę, będziemy korzystać z kilku języków webmasterskich: PHP, JavaScript, odrobinę HTML oraz CSS.

Do stworzenia tego przykładu wykorzystałem loga polskich klubów piłkarskich, jako że jestem wielkim fanem piłki nożnej.

Przed rozpoczęciem tworzenia takiej ściany należy się zaopatrzyć w odpowiednie biblioteki JavaScript:

Te wszystkie pliki należy dodać do sekcji HEAD strony WWW na której będzie wstawiona ściana obrazków.

Na początek musimy stworzyć plik o nazwie index.php w którym wpisujemy następujący kod:

<div class="sciana">
< ?php
foreach($kluby as $klub)
{
	echo '
<div class="klub" title="Kliknij by odwrócić obrazek">
<div class="klubObrot">
				<img src="img/loga/'.$klub[0].'.jpg" alt="More about '.$klub[0].'" />
			</div>
<div class="klubDane">
<div class="klubNazwa">
					'.$klub[1].'
				</div>
<div class="klubLink">
					<a href="'.$klub[2].'">'.$klub[2].'</a>
				</div>
</div>
</div>
 
	';
}
?>

Jak widać, w kodzie została zapisana struktura generowanego widoku wraz z wywołaniami zmiennych PHP i pętli foreach.
Teraz dowiesz się, do czego się tak właściwie ta pętla odnosi.

$kluby = array(
	array('arka','Arka Gdynia','http://www.arka.gdynia.pl/'),
	array('belchatow','PGE GKS Bełchatów','http://www.gksbelchatow.com/'),
	array('cracovia','Cracovia Kraków','http://www.cracovia.pl/'),
	array('jaga','Jagiellonia Białystok','http://www.jagiellonia.pl/'),
	array('korona','Korona Kielce','http://www.korona-kielce.pl/'),
	array('lech','Lech Poznań','http://www.lechpoznan.pl/'),
	array('lechia','Lechia Gdańsk','http://www.lechia.pl/'),
	array('legia','Legia Warszawa','http://legia.com/'),
	array('odra','Odra Wodzisław','http://www.odra.wodzislaw.pl/'),
	array('piast','Piast Gliwice','http://www.piast.gliwice.pl/'),
	array('poloniab','Polonia Bytom','http://www.poloniabytom.com.pl/'),
	array('poloniaw','Polonia Warszawa','http://ksppolonia.pl/'),
	array('ruch','Ruch Chorzów','http://www.ruchchorzow.com.pl/'),
	array('slask','Śląsk Wrocław','http://www.slaskwroclaw.pl/'),
	array('wisla','Wisła Kraków','http://www.wisla.krakow.pl/'),
	array('zaglebie','Zagłębie Lubin','http://www.zaglebie-lubin.pl/')
);
// losowanie kolejności wyświetlania klubów
shuffle($kluby);

W powyższym kodzie została zdefiniowana tablica, która zawiera dodatkowe tablice z informacjami. Każda taka "podtablica" przyjmuje strukturę array('nazwa_pliku_z_obrazkiem','opis','link'). Dzięki tak zdefiniowanej strukturze tablicy jesteśmy w stanie wywołać interesujące nas informacje.
Należy pamiętać, aby tablicę wstawić przed wywołaniem pętli.

Kolejną rzeczą, którą należy zrobić, to stworzenie skryptu który sprawi, że nasze obrazki zaczną się animować. Skrypt stworzony dla tego przykładu wygląda następująco:

$(document).ready(function(){
	$('.klubObrot').bind("click",function(){
		var elem = $(this);
		if(elem.data('flipped'))
		{
			elem.revertFlip();
			elem.data('flipped',false)
		}
		else
		{
			elem.flip({
				direction:'lr',
				speed: 350,
				color: '#fff',
				onBefore: function(){
					// wstawia treść diva o nazwie .klubDane (który domyślnie ma ustawiony display: none)
					// w kliknięty div o nazwie .klubObrot zanim animacja wystartuje:
					elem.html(elem.siblings('.klubDane').html());
				}
			});
			elem.data('flipped',true);
		}
	});
});

Kluczowe dane zostały wytłumaczone w treści kodu.

Ostatnim krokiem, który musisz wykonać to stworzenie pliku CSS, który nada odpowiedni styl dla naszego widoku w przeglądarce oraz który ukryje divy z danymi.
Kod wygląda w następujący sposób:

.sciana {
	margin-bottom: 30px;
}
.klub {
	width: 180px;
	height: 180px;
	float: left;
	margin: 4px;
	position: relative;
	cursor: pointer;
}
.klubObrot {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border: 1px solid #ddd;
	background: #ffffff;
}
.klubObrot: hover {
	border: 1px solid #999;
	-moz-box-shadow: 0 0 30px #999 inset;
	-webkit-box-shadow: 0 0 30px #999 inset;
	box-shadow: 0 0 30px #999 inset;
}
.klubObrot img {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -70px 0 0 -70px;
}
.klubDane {
	display: none;
}
.klubNazwa {
	font-size: 11px;
	padding: 50px 10px 20px;
	font-style: italic;
	text-align: center;
}
.klubLink {
	font-size: 10px;
	font-weight: bold;
	padding: 0 10px;
	text-align: center;
}

Zastosowałem tutaj efekt cienia dla obracanego elementu oraz wyśrodkowałem obrazki w divie za pomocą pozycjonowania absolutnego oraz atrybutów top i left. Jak pewnie zauważyłeś, klasa .klubDane ma domyślnie ustawiony atrybut display:none, który będzie zmieniany za pomocą pluginu który dołączyliśmy do kodu.

Demo z tego artykułu jest dostępne tutaj: ściana obrazków | galeria obrazków jQuery