Prosta galeria zdjęć w php

Prosta galeria zdjęć w php. Do mojej prezentacji wykorzystam galerię którą zrobiłem na potrzeby allegro w pracy. Jest to dość prosta galeria podobna do skryptów takich jak Lightbox, Litebox, Thickbox, GreyBox etc., lecz znacznie lżejsza od konkurencji. Sprawdzi się w przy nie wielkiej ilości zdjęć.

prosta-galeria-zdjec-w-php

 

Działanie skryptu można zobaczyć tutaj.

Więc zaczynamy:
Wchodzimy na na stronkę http://www.airmedia.pl pobieramy z tej stonki skrypt. Po niże na stronce jest napisane jak „zainstalować” skrypt na naszej stronie. My trochę zmienimy, ponieważ nasz skrypt z czytywał pliki z folderu dzięki czemu nie będziemy musieli za każdym razem zmieniać naszego pliku głównego, gdy będziemy chcieli dodać jakieś nowe zdjęcie.  Wiąże się to jednak z tym że nowe zdjęcia zginą w gąszczu starych zdjęć. Jeżeli jednak nie potrzebujemy wyróżniać nowych zdjęć skrypt jest wyjątkowo prosty i lekki. Po dłuższym monologu czas napisać coś nie co by galeria działała.

Tworzymy plik główny o nazwie index.php w nim piszemy:

<script src="mlbox.js" type="text/javascript"></script>

<div id="galeria" align="center">

<ul>

<ul><!--?php <br ?--> $katalog = "obrazki";</ul>

</ul>


<ul>

<ul>$katalogminiaturki = "miniaturki";</ul>

</ul>


<ul>

<ul>$galeria = opendir( $katalog );</ul>

</ul>


<ul>

<ul>while ( $zdjecie = readdir( $galeria ) ){</ul>

</ul>


<ul>

<ul>$odczyt = pathinfo( $katalog.'/'.$zdjecie );</ul>

</ul>


<ul>

<ul>if ( $odczyt['extension'] == 'jpg' ){</ul>

</ul>


<ul>

<ul>echo '

<li><a href="'.$katalog.'/'.$zdjecie.'" rel="mlbox">
<img src="'.$katalogminiaturki.'/'.$zdjecie.'" alt="Zdjęcie: '.$zdjecie.'" /></a></li>

</ul>

</ul>

';
}
}
closedir($galeria);
?&gt;
</div>

Małe co nieco wyjaśnienia. Jak widzisz skrypt jest dość krótki.

W sekcji <head> deklarujemy gdzie znajduje się plik css oraz silnik galerii. Po niżej  w zmiennej $katalog = „obrazki”;$katalogminiaturki = „miniaturki”; deklarujemy gdzie będą się znajdować duże zdjęcia do wyświetlenia, a gdzie miniaturki obrazków. Później prosta pętla, w której zmiennej $zdjecie przypisujemy ścieżki do plików z katalogu „obrazki”. Następnie dzięki funkcji pathinfo() otrzymujemy tablicę zawierającą informacje o wskazanych ścieżkach tj. nazwę katalogu, nazwę pliku i rozszerzenie. I to co ważne teraz wyświetlanie dużych zdjęć. Na koniec zamknięcie zmiennej galerii. Co najważniejsze a o czym nie powiedziałem. Pliki z katalogu obrazki i miniaturki muszą mieć taką samą nazwę.

A teraz czas na css, będzie jak powyżej skromnie.


html, body {
margin: 0;
padding: 0;
}

a img {
border: 1px solid #BBB;
padding: 2px;
margin: 10px 0 0;
vertical-align: top;
outline: none;
}

#galeria{
margin: 20px auto 0 auto;
color: #555;
font: 12px Arial, Verdana;
}

#galeria ul li{
display: inline;
margin:0 10px 10px 0;
}
#galeria ul {
list-style: none;
}

Jak zauważyliście w pliku głównym zastosowaliśmy wypunktowanie każdego zdjęcia, a przecież zdjęcia pokazują się obok siebie tak działa funkcja list-style: none; i jeszcze wcześniej usuwamy wyświetlanie się każdego zdjęcia w osobnej linijce display: inline;

Mając już te dwa pliki możemy sprawdzić czy galeria działa. Więc tam gdzie zapisaliśmy dwa powyższe pliki tworzymy dwa foldery odpowiednio odpowiadające za duże zdjęcia (obrazki) jak i za miniaturki (miniaturki) – oczywiście można zmienić te nazwy ale należy pamiętać by zmienić również nazwę w pliku index.php. Do tego katalogu wrzucamy pliki z naszego „silnika” galerii to jest plik mlbox.js oraz cały katalog z „images” w którym są zamieszczone pliki graficzne do obsługi naszej galerii zdjęć. I to było by na koniec.

Pobierz “Galeria zdjęć w php” galeria.zip – Pobrano 394 razy – 4 MB

Udostępnij na: