Prosty skrypt galerii zdjęć z efektem Highslide

Data aktualizacji: 22.04.2024r. Autor: Bartosz Stefanicki.

Posiadasz wiele fotografii które chciałbyś zaprezentować, lecz nie masz czasu na wykonanie skryptu, który by to wszystko obsługiwał?

Poniżej zobaczysz, jak stworzyć prosty silnik galerii zdjęć przy wykorzystaniu technologii Ajax do ich efektywnej prezentacji. Skrypt Highslide którego użyjemy do stworzenia galerii, to podobnie jak Lightbox, Litebox, Thickbox, GreyBox etc. - ostatnio popularny efekt prezentacji zdjęć. Polega na przyciemnieniu ekranu oraz płynnym rozwinięciu ramki ze zdjęciem podczas powiększenia.

Na itporady.pl dostępna jest także nowsza wersja skryptu.

1. Struktura plików i katalogów

Galeria składać się będzie z następujących folderów i dokumentów.

css/ - katalog z arkuszem stylów
javascript/ - katalog ze skryptem Highslide
obrazki/ - katalog z dużymi obrazkami
miniaturki/ - katalog z miniaturkami
index.php - skrypt galerii

2. Silnik galerii w PHP

Pierwszy etap to stworzenie pliku głównego index.php, który będzie napędzać naszą galerię zdjęć. Poniżej jego zawartość.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
  <script type="text/javascript" src="javascript/highslide-with-gallery.js"></script>
  <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />

  <script type="text/javascript">
    hs.graphicsDir = 'javascript/images/';
    hs.align = 'center';
    hs.transitions = ['expand', 'crossfade'];
    hs.outlineType = 'rounded-white';
    hs.fadeInOut = true;
    //hs.dimmingOpacity = 0.75;

    // Add the controlbar
    if (hs.addSlideshow) hs.addSlideshow({
    //slideshowGroup: 'group1',
      interval: 5000,
      repeat: false,
      useControls: true,
      fixedControls: 'fit',
      overlayOptions: {
        opacity: .75,
        position: 'bottom center',
        hideOnMouseOut: true
      }
    });
</script>
</head>
<body>

hs.graphicsDir = 'javascript/images/' - adres do katalogu z obrazkami,
hs.align = 'center' - wyrównanie dużego obrazka,
hs.transitions = ['expand', 'crossfade'] - efekt przejścia między obrazkami,
hs.outlineType = 'rounded-white' - obramowanie zdjęć,
hs.fadeInOut = true - przezroczystość podczas powiększania,
//hs.dimmingOpacity = 0.75 - przyciemnienie ekranu podczas oglądania zdjęć (domyślnie nieaktywne),
interval: 5000 - czas pomiędzy slajdami w pokazie zdjęć,
repeat: false - powtarzanie pokazu (domyślnie nieaktywne),
useControls: true - pasek kontrolny z przyciskami (domyślnie aktywne),
fixedControls: 'fit' - pozycja kontrolek,
opacity: .75 - przezroczystość paska kontrolnego,
position: 'bottom center' - pozycja paska kontrolnego (na dole, wyśrodkowany),
hideOnMouseOut: true - ukrywanie paska gdy myszka jest ustawiona poza ramką ze zdjęciem (domyślnie aktywne),

<div id="galeria">
<ul><?php
$katalog = "obrazki";
$katalogminiaturki = "miniaturki";
$galeria = opendir( $katalog );

Rozpoczynamy tworzenie silnika galerii, którą obejmujemy znacznikiem DIV "galeria". Zmiennna $katalog zawiera nic innego, jak nazwę katalogu z obrazkami, $katalogminiaturki analogicznie zawiera nazwę katalogu z miniaturkami. Odczyt listy katalogów i plików ze wskazanej lokalizacji umożliwia nam funkcja opendir() - tę wartość przypisujemy zmiennej $galeria.

while ( $zdjecie = readdir( $galeria ) ){
$odczyt = pathinfo( $katalog.'/'.$zdjecie );
  if ( $odczyt['extension']  == 'jpg' ){

Otwieramy pętlę, 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. Nam potrzebna będzie trzecia wartość czyli rozszerzenie, dla której robimy warunek - jeżeli jest to format ".jpg" to przechodzimy do generowania galerii zdjęć.

echo '<li><a href="'.$katalog.'/'.$zdjecie.'" class="highslide" onclick="return hs.expand(this)" title="Zdjęcie: '.$zdjecie.'"><img width="200" height="133" src="'.$katalogminiaturki.'/'.$zdjecie.'" alt="Zdjęcie: '.$zdjecie.'" /></a></li>';
  }
}
closedir($galeria);
?>
</ul>
</div>

</body>
</html>

2.1. Sortowanie zdjęć według nazwy

Powyższy kod nie zawiera funkcji, która sortowałaby zdjęcia według nazwy pliku. Na prośbę użytkowników napisałem kod, który zmienia postać rzeczy. Funkcja sort() układa rosnąco, natomiast rsort() malejąco.

<div id="galeria">
<ul>
<?php
$katalog = "obrazki";
$katalogminiaturki = "miniaturki";
$pliki = glob($katalog.'/*.jpg');

//lista plików trafia do tablicy
$i=0;
foreach($pliki as $key => $value){
        $tab[$i] = $value;
        $i++;
}
sort($tab);

//wyświetlenie listy zgodnie z datą
for($nr = 0; $nr < $i; $nr++){
   print '<li><a href="'.$tab[$nr].'" class="highslide" onclick="return hs.expand(this)" rel="nofollow"><img width="200" height="133" src="'.str_replace($katalog, $katalogminiaturki, $tab[$nr]).'" /></a></li>';
}
?>
</ul>
</div>

3. JavaScript

Archiwum ze skryptem Highslide dostępne jest na stronie autorów, highslide.com/download.php. Nas interesuje plik highslide-with-gallery.js wraz z katalogiem images/.

4. Arkusz stylów CSS

Drugi etap to stworzenie pliku style.css, który będzie zawierać style dla naszej galerii zdjęć - umieszczamy go w katalogu css/. Poniżej jego zawartość.

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

#galeria ul li {
        display: inline;
        margin:0 10px 10px 0;
}

#galeria img {
        border: 1px solid #bbb;
        padding: 1px;
}

/* AJAX */
.highslide-container div {
        font-family: Verdana, Helvetica;
        font-size: 10pt;
}
.highslide {
        outline: none;
        text-decoration: none;
}
.highslide img {
        border: 2px solid silver;
}
.highslide:hover img {
        border-color: gray;
}

.highslide-active-anchor img, .highslide-active-anchor:hover img {
        border-color: black;
}
.highslide-image {
        border-width: 2px;
        border-style: solid;
        border-color: white;
        background: gray;
}
.highslide-wrapper, .rounded-white {
        background: white;
}
.highslide-image-blur {
}
.highslide-caption {
        display: none;
        border-top: none;
        font-size: 1em;
        padding: 5px;
        background: white;
}
.highslide-heading {
        display: none;
        font-weight: bold;
        margin-bottom: 0.4em;
}
.highslide-dimming {
        position: absolute;
        background: black;
}
.highslide-loading {
        display: block;
        color: black;
        font-size: 9px;
        font-weight: bold;
        text-transform: uppercase;
        text-decoration: none;
        padding: 3px;
        border: 1px solid white;
        background-color: white;
        padding-left: 22px;
        background-image: url(../javascript/images/loader.white.gif);
        background-repeat: no-repeat;
        background-position: 3px 1px;
}
a.highslide-credits,
a.highslide-credits i {
        padding: 2px;
        color: silver;
        text-decoration: none;
        font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
        color: white;
        background-color: gray;
}

/* Controls. See http://www.google.com/search?q=css+sprites */
.highslide-controls {
        width: 195px;
        height: 40px;
        background: url(../javascript/images/controlbar-white.gif) 0 -90px no-repeat;
        margin-right: 15px;
        margin-bottom: 10px;
        margin-top: 20px;
}
.highslide-controls ul {
        position: relative;
        left: 15px;
        height: 40px;
        list-style: none;
        margin: 0;
        padding: 0;
        background: url(../javascript/images/controlbar-white.gif) right -90px no-repeat;
}
.highslide-controls li {
        float: left;
        padding: 5px 0;
}
.highslide-controls a {
        background-image: url(../javascript/images/controlbar-white.gif);
        display: block;
        float: left;
        height: 30px;
        width: 30px;
        outline: none;
}
.highslide-controls a.disabled {
        cursor: default;
}
.highslide-controls a span {
        /* hide the text for these graphic buttons */
        display: none;
}
.highslide-move a {
        cursor: move;
}

/* The CSS sprites for the controlbar */
.highslide-controls .highslide-previous a {
        background-position: 0 0;
}
.highslide-controls .highslide-previous a:hover {
        background-position: 0 -30px;
}
.highslide-controls .highslide-previous a.disabled {
        background-position: 0 -60px !important;
}
.highslide-controls .highslide-play a {
        background-position: -30px 0;
}
.highslide-controls .highslide-play a:hover {
        background-position: -30px -30px;
}
.highslide-controls .highslide-play a.disabled {
        background-position: -30px -60px !important;
}
.highslide-controls .highslide-pause a {
        background-position: -60px 0;
}
.highslide-controls .highslide-pause a:hover {
        background-position: -60px -30px;
}
.highslide-controls .highslide-next a {
        background-position: -90px 0;
}
.highslide-controls .highslide-next a:hover {
        background-position: -90px -30px;
}
.highslide-controls .highslide-next a.disabled {
        background-position: -90px -60px !important;
}
.highslide-controls .highslide-move a {
        background-position: -120px 0;
}
.highslide-controls .highslide-move a:hover {
        background-position: -120px -30px;
}
.highslide-controls .highslide-full-expand a {
        background-position: -150px 0;
}
.highslide-controls .highslide-full-expand a:hover {
        background-position: -150px -30px;
}
.highslide-controls .highslide-full-expand a.disabled {
        background-position: -150px -60px !important;
}
.highslide-controls .highslide-close a {
        background-position: -180px 0;
}
.highslide-controls .highslide-close a:hover {
        background-position: -180px -30px;
}

Style umieszczone po komentarzu "AJAX" należą do skryptu Highslide, przed nim znajdziemy opcjonalne style galerii tj. obramowanie zdjęć, marginesy i szerokość strony.

Pobierz

Kategorie: HTML + CSS, PHP + MySQL. Tagi: #ajax, #css, #html, #php, #skrypty. Źródło obrazków: Pixabay, Font awesome.

Zobacz także

Nowości w PHP 8.4

Jak zmienić kolor z postaci szesnastkowej HEX na dziesiętne składowe i odwrotnie?

Co to jest baza danych? Jakie bazy danych są na hostingu?

Wyświetlanie danych z bazy SQL za pomocą PHP

Szukasz hostingu?

Jest dużo firm oferujących hosting, ale którą wybrać? Przedstawiamy zestawienie ranking hostingów (Styczeń 2026).

243 komentarzy

Scooby

25.09.2011, 02:44

witam, fajny skrypt, jak go rozpakowalem i wrzucilem chodzi OK, ale moze jestem az tak ciemny albo co, ale jak wrzucic tam swoje fotki ?? :P mam 6 fotek, 1.jpg, 2.jpg itd, wrzucam je do "obrazki" i jak sie domyslam miniaturki tez musze sam zrobic ? ? a wiec zrobilem 200x133 wrzucilem do miniaturki i po odswierzeniu strony tylko biala strona :( co robie nie tak ?? moge prosic jak to sie mowi krok po kroku ?? Ogolnie fajny skrypt szukalem wlasnie czegos takiego... Pozdro

Artur

21.09.2011, 16:51

Witam, Skorzystałem z udostępnionego skryptu galerii zdjęć. Ale czy jest możliwość żeby zrobić sortowanie według numerów zdjęć a nie jak teraz jest nie pokoleji?. Mam ponazywane pliki jpg w taki sposób jak 01.jpg, 02.jpg, 03.jpg itd. I interesuje mnie żeby w takiej kolejności były wyświetlane zdjęcia. Druga sprawa to czy jest możliwość dodania opisu pod zdjęciami?. Tymi już powiększonymi?. Jeśli tak to w jaki sposób to zrobić?.

Mikołaj

20.09.2011, 16:37

Witam, a jak zmodyfikować, żeby miniaturki były np. 6 poziomo obok siebie, a nie 2x po 3?

Maciek

25.07.2011, 14:51

barteks: ja tu widzę tylk osortowanie wg daty... a chodzi mi wg nazw

Bartosz Stefanicki

28.07.2011, 21:51

Autor

Maciek, spróbuj skorzystać z tego kodu: http://itporady.pl/php-mysql/prosty-skrypt-galerii-zdjec-z-efektem-highslide/comment-page-1/#comment-644

Odpowiedz

Bartosz Stefanicki

24.07.2011, 01:55

Autor

Maciek, odpowiedź na to pytanie znajduje się kilka komentarzy wcześniej

Maciek

22.07.2011, 02:45

co zrobić żeby kolejność miniaturek była taka jak kolejność plików w katalogu na serwerze? (są tam ułożone wg nazw)

rudy

22.06.2011, 17:11

wrzuciłem wszystko tak jak pisało i nic się nie wyświetla co mogę zrobić?

Bartosz Stefanicki

27.06.2011, 17:26

Autor

@rudy Pamiętaj, że skrypt wymaga obsługi PHP na serwerze, a plik MUSI mieć rozszerzenie ".php" nie ".html".

Odpowiedz

Mariusz

15.06.2011, 04:03

sciagnalem ta galeria na dysk ale po otwarciu pliku index.php wyskakuje mi okienko czy zapisac plik

Bartosz Stefanicki

27.06.2011, 17:42

Autor

@mariusz Jeśli chcesz zobaczyć galerię bezpośrednio z dysku zainstaluj jakiś serwer lokalny, np. Krasnala inaczej nie zobaczysz galerii. Innym sposobem jest wrzucenie jej na serwer zewnętrzny, który obsługuje PHP.

Odpowiedz

wilku

09.06.2011, 14:51

wydaje mi się że prościej jest zaimplementować sortowanie w taki sposób: <code>$galeria = opendir( $katalog ); $i=1; while ( $zdjecie = readdir( $galeria ) ){ $odczyt = pathinfo( $katalog.'/'.$zdjecie ); if ( ($odczyt['extension'] == 'jpg') | ($odczyt['extension'] == 'JPG') ){ $obraz[$i] = $odczyt['basename']; $i++; }} natsort($obraz); foreach ($obraz as $n => $nazwa) echo '<a href="'.$katalog.'/'.$nazwa.'" rel="nofollow"></a>'; closedir($galeria);</code> bardziej mi się to wydaje przejrzyste niż propozycja barteksa

Kuba

09.05.2011, 14:35

A czemuż zdjęcia chowają się pod animacją Flash? np.: klikam w miniaturę i otwiera mi się duże i jak nie przesunę na animacje to się chowa pod nią

Bartosz Stefanicki

05.06.2011, 20:53

Autor

@Kuba, do parametrów animacji flash dodaj: [code lang="html"]<param name="wmode" value="transparent" wmode="transparent">[/code]

Odpowiedz

Maciej

30.04.2011, 14:54

Czy koniecznie są miniaturki jako osobne pliki? Przecież one też trochę ważą. Czy dobrym rozwiązaniem byłoby skalowanie orygnialnych plików zdjęć do postaci miniaturki za pomocą HTML/CSS/JS? jak to zrobić? Pozdrawiam, M

Bartosz Stefanicki

05.06.2011, 20:57

Autor

@Maciej, miniaturki w obecnej postaci nie są koniecznością - jest to lepsze rozwiązanie. Zgadzam się, są to dodatkowe pliki które zajmują miejsce na serwerze, lecz dzięki temu strona się szybciej ładuje (przy wczytywaniu użytkownik pobiera o wiele mniejsze zdjęcia). Jest możliwe skalowanie - wystarczy podmienić adres miniaturki na większy obrazek i nadać "width" czyli szerokość dla obrazka.

Odpowiedz

kiko

27.04.2011, 21:35

mozesz jasniej bo nie rozumiem

Bartosz Stefanicki

27.04.2011, 01:23

Autor

kiko, możesz nadać obiektom LI (wykazowi) wartość szerokości, wówczas zdjęciom ją usunąć - i zostawić jedynie dane dla wysokości zdjęcia.

kiko

25.04.2011, 17:21

witajcie . wpadlem na ta galerie i jest calkiem zmyslnie zrobiona. lecz nie podoba mi sie na sztywno ustawianie miniaturek - powinno byc takie jakie jest zdjecie moniaturki. Dokladniej chodzi mi o to ze jezelu zdjecie jest zrobione bokiem to miniaturka jest zniekształcona co bardzo mi przeszkadza. da sie to jakos naprawic ?

Bartosz Stefanicki

20.03.2011, 23:57

Autor

Jaco, wygląd galerii oraz ustawienia wyśrodkowania/marginesów są ustawione tylko w arkuszu CSS. [code lang="css"]#galeria{ width: 620px; margin: 50px auto 0 auto; color: #555; font: 12px Arial, Verdana; }[/code] 1) Ustawienie wartości "auto" dla marginesu prawego i lewego sprawia, że galeria jest wyśrodkowana. 2) Musisz poszukać w kodzie skryptu Highslide.

jaco

09.03.2011, 13:24

http://petke.pl/ewelina/galeria.php tu jest dobry przyklad tego o czym napisalem wyzej. 1 zdjecie otwiera sie na srodku klikajac nastepne otwiera sie wieksze zdjecie i zajmuje ono caly ekran i klikajac kolejny raz "nastepne" otwiera sie male zdjecie ale nie jest centalnie na srodku strony tylko na samym dole. bede wdzieczny za pomoc

jaco

09.03.2011, 13:17

Bartkes lub comandeer prosze was poraz kolejny o pomoc. Ta galeria nie wiem czemu ma po swojej lewej stronie duzy margines okolo 20px(jak wstawiam ja do tabelki to nigdy jej nie moge ustawic maxymalnie po lewej stronie), mimio tego ze w css ustawie wszystkie marginesy na 0 jak rowniez align=left. To musi byc gdzies idziej zapisane:/ moze wiecie gdzie. A moje drugie pytanie to gdzie jest zapisana informacja o tym w jaki sposob ma sie wyswietlac zdjecie chodzi mi konkretnie o miejsce zeby było centarlnie na srodku bez wzgledu na rozmiar i nawet jezeli po wiekszym zdjeciu bedzie mniejsze zdjecie to zeby wracalo ono na sam srodek ekranu. bo teraz tak sie nie dzieje. jezeli otworze zdjecie ktore jest np na cala strone i przejde przyciskiem "nastepne" do kolejengo zdjecia ktore jest mniejsze wyswietla mi sie ono po srodku tylko ze na samym dole ekranu:/

jaco

02.03.2011, 22:19

no dzieki wielkie, to jest pewnie oznaczenie komentarza:P

Bartosz Stefanicki

02.03.2011, 22:36

Autor

Tak, jest to oznaczenie komentarza :) Zobacz tutaj: http://itporady.pl/php-mysql/komentowanie-kodu-w-php/.

Odpowiedz

Comandeer

02.03.2011, 22:10

@jaco po prostu usunąć // :D

jaco

02.03.2011, 18:03

na ile trzeba zmienic parametr //hs.dimmingOpacity = 0.75 zeby przyciemnic ekran?? bo kurna rozne wartosci pissalem i nic caly czas bez zmian

Prosty skrypt galerii zdjęć z efektem Highslide

1. Struktura plików i katalogów

2. Silnik galerii w PHP

2.1. Sortowanie zdjęć według nazwy

3. JavaScript

4. Arkusz stylów CSS

Zobacz także

Szukasz hostingu?

243 komentarzy

Najpopularniejsze

Zapomniane hasło lub PIN w Androidzie - jak je zresetować?

Jak zainstalować VirtualBox Guest Additions

100+ skrótów klawiaturowych w Windows

Ostatnie komentarze

Najnowsze

Logowanie bez hasła w WordPressie – konfiguracja passkeys (WebAuthn)

Nowości w PHP 8.4

W jakim edytorze pisać strony internetowe?

Statystyki