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

Lukasz

25.06.2012, 11:25

Witam A jak zminienic kod aby obrazki pobiral z bazy Mysql.

Mateusz

19.06.2012, 21:34

Ogólnie jak gdyby nie działał u mnie ten skrypt javascript :(

Bartosz Stefanicki

02.06.2012, 22:27

Autor

Treść pytania: [code lang="html"]Witam bardzo fajny scrypt tej galerii. Mam problem z tym że na mojej stronie miniaturki i zdjęcia duże są w jednym katalogu. Miniaturki mają przedrostek n_ miniaturka: n_obrazek.jpg duży: obrazek.jpg Co musiałbym zmienić w skrypcie ? Z góry dziękuję za pomoc. Jacek Zieliński[/code] Jacek, dziękuję za maila. Zamień kod na poniższy: 1. [code lang="php"]$katalog = "obrazki"; $katalog_slash = $katalog.'/'; $katalogminiaturki = $katalog.'/n_';[/code] 2. [code lang="php"]print '<li><a href="'.$tab[$nr].'" class="highslide" onclick="return hs.expand(this)" rel="nofollow"><img width="200" height="133" src="'.str_replace($katalog_slash, $katalogminiaturki, $tab[$nr]).'" /></a></li>'; }[/code]

Bartosz Stefanicki

02.06.2012, 22:18

Autor

@Mateusz, Wydaje mi się, że masz problem z podlinkowaniem CSS - sprawdź poprawność.

Mateusz

18.05.2012, 00:18

Ok dodam moje pytanie jako zdjęcie bo co dodam od razu mi przerabia z kodu na normalny widok :( http://taap.pl/images/3Ijzs.jpg Dodałem css do pliku "galerie.php" header wyglada tak: Zdawało mi się ze może być. Serwer sam instalowałem na VPSie lecz nie mogłem nic znaleźć na temat tego czy muszę coś odhaczyć żeby php działało z JavaScript :( link podałem jako adres strony jezeli chcesz spojrzeć :)

Mateusz

16.05.2012, 22:13

Co musi być zainstalowane na serwerze żeby działało? PHP5 + Apache 2 + Mysql + co jeszcze ? :D

Bartosz Stefanicki

17.05.2012, 13:51

Autor

@Mateusz, Sprawdź uprawnienia dla pliku style.css i czy na pewno znajduje się na serwerze. Musisz mieć PHP.

Odpowiedz

Mateusz

14.05.2012, 19:29

Chciałem to podpiac pod moja strone ale nie wiadomo czemu nie czyta pliku style.css :/

Łukasz

28.04.2012, 01:52

Witam. Prubuję zrobić przekierowanie strony index.php z ramki :: i nic się nie pojawia -- proszę o pomoc co robię źle..

Bartosz Stefanicki

14.04.2012, 14:10

Autor

@Mariusz, 1. Do linka dodaj wartość: [code lang="html"]<a href="..." class="highslide" onclick="return hs.expand(this)" rel="nofollow"><img></a>[/code] 2. W ramach head umieść: [code lang="html"]<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>[/code] Na koniec sprawdź czy wszystkie pliki znajdują się na serwerze i odniesienia do nich.

Bartosz Stefanicki

14.04.2012, 14:04

Autor

@Lukasz, ta porada dotyczy skryptu Highslide, a powyższy kod zawiera dodatkowo PHP - to może być przyczyną.

Mariusz

10.04.2012, 21:28

witam, mam na swojej stronie "index.html" na dole trzy obrazki i chciałbym aby po kliknieciu w nie otwierala sie wlasnie w taki sposob galeria, dodalem arkusz galeria.css i ten od javascript, dopisałem kod w index i po umieszczeniu w miejscu gdzie sa te obrazki nic mi sie nie wyswietla, jestem jeszcze zielony w te klocki i pewnie cos przeoczylem tylko nie wiem co

Lukasz

25.02.2012, 18:36

Witam chciałbym umieścić index html na mojej stronie ale gdy wklejam kod nie wyświetla obrazów. To jest animacja którą bym chciał umieścić http://178.21.20.102/~lukasz/dupa/WOW%20Slider/index.html a to kod który uzyskałem z indeksu.html [code lang="html"] WOWSlider generated by WOWSlider.com  a#vlb{display:none}   <a href="http://wowslider.com/" rel="nofollow">WOWSlider.com</a> <a href="http://178.21.20.102/~lukasz/dupa/WOW%20Slider/index.html#wows0" title="" rel="nofollow">1</a> <a href="http://178.21.20.102/~lukasz/dupa/WOW%20Slider/index.html#wows1" title="" rel="nofollow">2</a> <a href="http://178.21.20.102/~lukasz/dupa/WOW%20Slider/index.html#wows2" title="" rel="nofollow">3</a> <a href="http://178.21.20.102/~lukasz/dupa/WOW%20Slider/index.html#wows3" title="" rel="nofollow">4</a> <a href="http://178.21.20.102/~lukasz/dupa/WOW%20Slider/index.html#wows4" title="" rel="nofollow">5</a> <a href="http://178.21.20.102/~lukasz/dupa/WOW%20Slider/index.html#wows5" title="" rel="nofollow">6</a> <a href="http://wowslider.com/" rel="nofollow">jQuery Slider Caption by WOWSlider.com v2.0</a> <a href="http://178.21.20.102/~lukasz/dupa/WOW%20Slider/index.html#" rel="nofollow"></a> [/code] Proszę o Pomoc Pozdrawiam.

Bartosz Stefanicki

23.02.2012, 22:00

Autor

@Dervi, Dla mnie wizytówka to strona firmowa czyli komercyjna, gdzie istnieje taka konieczność. Opłata jest zapewne za całość czyli kod javascript + wygląd.

Dervi

23.02.2012, 20:30

Czyli jeśli chciał bym użyć na stronie która jest wizytówką mojej firmy muszę zapłacić za highslide? A w przypadku gdy zmienię szatę graficzna na grafikę mojego autorstwa będe mógł korzystać za darmo z tego skryptu ?

Błażej

19.02.2012, 16:21

Cześć, dlaczego nie działają mi przyciski? To znaczy są ale niewidoczne :<

Bartosz Stefanicki

20.02.2012, 21:40

Autor

@Błażej, Sprawdź czy na pewno wgrałeś wszystkie pliki na serwer. Upewnij się czy mają nadane odpowiednie uprawnienia dostępu (przez klienta FTP).

Odpowiedz

Seba

17.02.2012, 12:56

Witam Mógłbyc powiedzieć jak dodać tutaj automatyczne generowanie miniaturek? Bez twgo mam po prostu liste plików.

Bartosz Stefanicki

20.02.2012, 21:39

Autor

@Seba, Ten skrypt generuje galerię zdjęć wraz z efektywną prezentacją, wystarczy wgrać dwa rodzaje obrazków: duże i miniaturki - wtedy wszystko działa.

Odpowiedz

Wojciech

15.02.2012, 17:48

WItam , mam dwa takie same zdjecie (czarnobiale i kolorowe) na poczatku jest czarnobiale ale chcialbym aby po najechaniu (a:hover) bylo kolorowe . Moze ktos mi podpowiedziec??

Bartosz Stefanicki

20.02.2012, 21:38

Autor

@Wojciech, Należy skorzystać z JavaScript. Wkrótce na łamach tego serwisu porada na ten temat :)

Odpowiedz

Bartosz Stefanicki

08.02.2012, 19:58

Autor

@Kamil: Rozwiązanie problemu podałem w komentarzu tu: http://itporady.pl/php-mysql/prosty-skrypt-galerii-zdjec-z-efektem-highslide/comment-page-1/#comment-3532