Galeria zdjęć w PHP
Data dodania: 2 paździenik 2011r.
Ostatnia modyfikacja: 27 grudzień 2011r.
Kiedyś na mojej stronie był artykuł o galerii zdjęć w PHP. Jednak jej kod był strasznie prymitywny, a przez to bardzo niepraktyczny, w ogóle nie funkcjonalny – po prostu naprawdę słaby. Zdjęcia musiały mieć stałą nazwę i kolejne numery etc. Tak więc postanowiłem napisać nowy, ulepszony, prostszy w obsłudze i bardziej przyjazny skrypt galerii w PHP. Do rzeczy.
Skrypt wyświetla wszystkie zdjęcia z podanego folderu w kolejności alfabetycznej. Tam, gdzie chcemy użyć tej galerii trzeba tylko wywołać funkcję, która przyjmuje 2 parametry obowiązkowe (nazwę katalogu, gdzie są zdjęcia i nazwę folderu z miniaturkami), a także jeden opcjonalny – tablicę z nazwami zdjęć, które chcemy wyświetlić (gdy nie chcemy pokazywac wszystkich zdjęć z folderu, albo gdy nie chcemy ich wyświetlać alfabetycznie tylko w wybranej kolejności). Nazwy miniaturek muszą być takie same jak nazwy oryginalnych fotek. Aby strzałki do następnego/poprzedniego zdjęcia były zawsze ładnie na środku w pionie, serwer PHP musi mieć dostęp do biblioteki GD.
Przygotowanie tablicy ze zdjęciami
Na początku skrypt sprawdza, czy podaliśmy 3. parametr funkcji, czyli własną tablicę z nazwami zdjęć. Jeśli nie, pobiera wszystkie obrazki z wybranego przez nas folderu i pakuje je do tablicy. Nastepnie sortuje tablicę alfabetycznie, po czym przetwarza ją tak, aby pierwszy pierwsze zdjęcie miało indeks 1.
Listing 1.1 funkcje.php – deklaracja funkcji Galeria() i tworzenie tablicy ze zdjęciami
<?php
function Galeria ($dir, $dir_mini, $zdjecie = array())
{
$sciezka = pathinfo($_SERVER['SCRIPT_FILENAME']);
$plik_skryptu = $sciezka['basename'];
if(count($zdjecie) == 0)
{
if(!is_dir($dir))
{
echo "Nie ma takiego katalogu jak $dir";
exit;
}
if(!is_dir($dir_mini))
{
echo "Nie ma takiego katalogu jak $dir_mini";
exit;
}
/*************************************
* *
* STWORZENIE TABLICY ZE ZDJECIAMI *
* *
*************************************/
$dh = opendir($dir);
$i = 1;
while($plik !== false)
{
$plik = readdir($dh);
$czesci_pliku = pathinfo($plik);
$rozszerzenie = $czesci_pliku['extension'];
// wybieranie tylko zdjec z podanego folderu
if($rozszerzenie == 'jpg' || $rozszerzenie == 'png' || $rozszerzenie == 'gif')
{
$zdjecie[$i] = $plik;
$i++;
}
}
closedir($dh);
// sortowanie zdjec alfabetycznie
sort($zdjecie);
}
//ustawienie pierwszego indeksu tablicy na 1
if(isset($zdjecie[0]))
{
$x = count($zdjecie);
while($x > 0)
{
$zdjecie[$x] = $zdjecie[$x - 1];
$x--;
}
unset($zdjecie[0]);
}
Wyświetlanie odpowiedniego zdjęcia
Generalnie skrypt opiera się na zmiennych $_GET, po których rozpoznaje, jakie zdjęcie ma wyświetlić. Zdjęcie jest wybierane z tablicy za pomocą indeksu, który to indeks ma numer przechowywany w zmiennej $_GET['zdj']. Dzięki temu bardzo łatwo jest dostać się do następnego i poprzedniego zdjęcia. Wystarczy odjąć lub dodać 1 od $_GET['zdj']. W tym fragmencie kodu pojawia się także zmienna $_GET['str'], która przechowuje numer aktualnej strony z miniaturami, o których to za chwilę.
Listing 1.2 funkcje.php – kod zajmujący się wybraniem i wyświetleniem odpowiedniego zdjęcia
$ile_zdjec = count($zdjecie);
if(isset($_GET['zdj']))
{
$zdj = $_GET['zdj'];
}
else
{
// gdy nie podano $_GET['zdj'] to nadaj zmiennej $zdj wartosc 1
$zdj = 1;
}
if(isset($_GET['str']))
{
$str = $_GET['str'];
}
else
{
// gdy nie podano $_GET['str'] to nadaj zmiennej $str wartosc 1
$str = 1;
}
$prev = $zdj - 1; // numer poprzedniego zdjecia
$next = $zdj + 1; // numer nastepnego zdjecia
/******************************************
** **
** WYSWIETLANIE ODPOWIEDNIEGO ZDJECIA **
** **
******************************************/
echo "<div id=\"n\">\n\n";
for($i = 1; $i <= $ile_zdjec; $i++) // petla ze wszystkimi zdjeciami
{
if($zdj == $i) // wybierz aktualne zdjecie
{
// pobieranie wysokosci aktualnego obrazka
$rozmiar = getimagesize($dir."/".$zdjecie[$zdj]);
$wysokosc = $rozmiar[1];
if($zdj != 1) // jesli to pierwsze zdjecie to nie wyswietlaj linka do poprzedniego
{
echo "<a class=\"left\" style=\"height: ".$wysokosc."px;\" href=\"".$plik_skryptu."?zdj=".$prev."&str=".$str."#n\">Wstecz</a>\n";
}
$dane_pliku = pathinfo($zdjecie[$zdj]);
echo "<img src=\"".$dir."/".$zdjecie[$zdj]."\" alt=\"".$dane_pliku['filename']."\" />\n";
if($zdj != $ile_zdjec) // gdy to ostatnie zdjecie to nie wyswietlaj linka do nastepnego
{
echo "<a class=\"right\" style=\"height: ".$wysokosc."px;\" href=\"".$plik_skryptu."?zdj=".$next."&str=".$str."#n\">Dalej</a>\n";
}
}
}
Miniaturki
Na początku ustalana jest liczba miniatur wyświetlanych na jednej stronie. Ja wybrałem, aby było ich 5. Można to swobodnie zmienić, ale trzeba pamiętać o zmianie stylów CSS, a dokładniej, o zmianie szerokości listy nieuporządkowanej #miniatury. Następnie obliczane są potrzebne do działania skryptu wielkości: ile ma być stron z miniaturami, a także numery poprzedniej i następnej strony. Teraz czas na wyświetlenie odpowiednich miniatur. Wybierane są one na podstawie numeru aktualnej strony, a następnie wyświetlane w pętli. Przed wyświetleniem zdjęcia, pobierana jest jego wysokość za pomocą funkcji getimagesize(), a następnie wstawiana jako wysokość strzałęk zmiany zdjęcia, żeby ich tło mogło być zawsze na środku w pionie.
Listing 1.3 funkcje.php – stworzenie listy z miniaturami
/***************************
** **
** LISTA Z MINIATURAMI **
** **
***************************/
$ile_miniatur = 5; // mozna zmienic, ale trzeba pamietac o zmianie stylow CSS
$ile_stron = ($ile_zdjec / $ile_miniatur) + 1; // obliczanie ilosci stron z miniaturami
$ile_stron = (integer)$ile_stron; // gdyby liczba byla liczba float zmien na integer
$nextpage = $str + 1; // numer poprzedniej strony
$prevpage = $str - 1; // numer nastepnej strony
echo "\n\n<ul id=\"miniatury\">\n";
for($i = 1; $i <= $ile_stron; $i++)
{
if($str == $i)
{
if($str != 1) // jesli to pierwsza strona z miniaturami nie wyswietlaj odnosnika do poprzedniej
{
echo "<li class=\"prevpage\"><a href=\"".$plik_skryptu."?zdj=".$zdj."&str=".$prevpage."#n\"><<</a></li>\n";
}
$m = ($str * $ile_miniatur) - ($ile_miniatur - 1); // aktualna miniaturka
while($m <= $str * $ile_miniatur) // wyswietlanie listy z miniaturami
{
echo "<li><a href=\"".$plik_skryptu."?zdj=".$m."&str=".$str."#n\"><img src=\"".$dir_mini."/".$zdjecie[$m]."\" alt=\"".$zdjecie[$m]."\" /></a></li>\n";
if($m == $ile_zdjec) // jesli to ostatnia miniaturka to zatrzymaj petle w tym miejscu
{
break;
}
$m++;
}
if($str == $ile_stron - 1 && $ile_zdjec % $ile_miniatur == 0) // jesli liczba zdjec jest taka, ze pasuja na styk, przewij
{
break;
}
else if($str < $ile_stron) // jesli to nie jest ostatnia strona - wyeswietl linka do nastepnej
{
echo "<li class=\"nextpage\"><a href=\"".$plik_skryptu."?zdj=".$zdj."&str=".$nextpage."#n\">>></a></li>";
}
}
}
echo "\n</ul>\n\n";
?>
<a id="copyright" href="http://filipmarkiewicz.boo.pl">Autor galerii: Filip Markiewicz</a>
<?php
echo "</div>\n";
}
?>
Kod CSS
Kod CSS raczej nie wymaga wiekszego komentarza, oględnie tylko go opiszę. Na początku kodu oczywiście zerowanie marginesów. Strzałki przewijania zdjęć są pozycjonowane absolutnie względem div'a #n, czyli łapiącego całą galerię. Aby były na środku, muszą być oddalone od górnej krawędzi tego div'a o dokładnie taką ilość pikseli, ile ten div ma marginesu wewnętrznego z góry. Strzałki zmiany strony miniaturek także są pozycjonowane absolutnie, względem listy. One musza być koniecznie tak pozycjonowane, aby miniaturki były zawsze na środku (strzałki są wyświetlane już na padding'u listy).
Listing 2 galeria.css – przykładowy arkusz stylów CSS
* {
margin: 0;
padding: 0;
}
#n {
width: 700px;
margin: 0 auto;
padding: 20px 0 0 0;
text-align: center;
position: relative;
overflow: hidden;
}
#n img {
max-width: 550px;
border: 1px solid #000;
}
.left {
padding: 0;
left: 10px;
background: url('img/lewa_strzalka.png') no-repeat;
}
.right {
padding: 0;
right: 10px;
background: url('img/prawa_strzalka.png') no-repeat;
}
.left, .right {
text-indent: -100000px;
width: 42px;
position: absolute;
top: 20px; /* tyle ile gorny padding #n */
border: 0;
color: #aaa;
text-decoration: none;
background-position: right center;
}
.left:hover, .right:hover {
background-position: left center;
}
#miniatury {
margin: 20px auto 0 auto;
overflow: hidden;
width: 550px;
padding: 0 50px;
position: relative;
}
#miniatury li {
float: left;
list-style-type: none;
}
#miniatury li.prevpage, #miniatury li.nextpage {
float: none;
position: absolute;
bottom: 15px;
}
#miniatury li.prevpage a, #miniatury li.nextpage a {
border: 0;
width: 22px;
height: 60px;
text-indent: -10000px;
}
#miniatury li.prevpage a {
background: url('img/lewa_strzalka_mini.png') no-repeat right center;
}
#miniatury li.nextpage a {
background: url('img/prawa_strzalka_mini.png') no-repeat right center;
}
#miniatury li.prevpage {
left: 10px;
}
#miniatury li.nextpage {
right: 10px;
}
#miniatury a {
display: block;
margin: 0 10px;
border: 5px solid #444;
}
#miniatury a:hover {
border-color: #db7f13;
}
#miniatury li img {
display: block;
width: 80px;
height: 80px;
border: 0;
}
#copyright {
float: right;
font-size: 8.5px;
padding: 5px;
border: 1px solid #000;
background: #222;
color: #444;
text-decoration: none;
margin: 20px 0 0 0;
}
#copyright:hover {
color: #999;
}
Demo
Poniżej możecie oglądać demo tejże galerii. Moim zdaniem efekt jest naprawdę zadowalający. Na pewno kod PHP nie jest idealny, więc jeśli ktoś znajdzie jakiś karygodny błąd to proszę o informację, w komentarzu, albo inną drogą. Jedyne z czego nie jestem w pełni zadowolony to strzałki, no ale cóż… kiepski ze mnie grafik. Demo z wszystkimi potrzebnymi plikami można ściągnąć stąd. Zachęcam do komentowania.
Komentarze
Dodaj komentarz- Siwy
- 9 październik 2011r., 12:45
Hmm... No tak, to nie Flash - zdjęcie musi się załadować najpierw. Takie też było założenie, aby działało to po stronie serwera. Jednak w Firefoxie nie zauważyłem skakania, na Operze jest to zauważalne. No i ofc w badzIEwiu ;].
Masz jakieś sugestie co do kodu PHP?- Luke
- 9 październik 2011r., 00:59
Galeria ogólnie ok, tylko strona trochę "skacze" przy ładowaniu następnego zdjęcia.