Prosty skrypt galerii zdjęć z efektem Highslide

Data aktualizacji: 22.04.2024r. Autor: Bartosz Stefanicki.

Prosty skrypt galerii zdjęć z efektem Highslide

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
Nowości w PHP 8.4
Czytaj dalej...
Jak zmienić kolor z postaci szesnastkowej HEX na dziesiętne składowe i odwrotnie?
Jak zmienić kolor z postaci szesnastkowej HEX na dziesiętne składowe i odwrotnie?
Czytaj dalej...
Co to jest baza danych? Jakie bazy danych są na hostingu?
Co to jest baza danych? Jakie bazy danych są na hostingu?
Czytaj dalej...
Wyświetlanie danych z bazy SQL za pomocą PHP
Wyświetlanie danych z bazy SQL za pomocą PHP
Czytaj dalej...

243 komentarzy

Bartosz Stefanicki
19.11.2011, 19:05
Autor
@Adi: Zgadza się, teraz już nie ma błędów. Sprawdź czy odnośniki do plików skryptu Highslide są prawidłowe, ponieważ wykaz zawiera linki do dużych plików.
Adi
18.11.2011, 19:22
Sprawdziłem... nie ma żadnych błędów jakieś inne propozycje?
Bartosz Stefanicki
18.11.2011, 15:21
Autor
@Adi: Sprawdź czy w kodzie strony nie ma błędów: http://validator.w3.org/
adi
18.11.2011, 14:21
Pomożesz mi przyjacielu Bartku. Mam stronę z tą Twoją galerią www.funkydog.pl/galeria.php . Klikam na zdjęcie i wyskakuje okienko "Ładowanie" i nic poza tym. Mógłbyś rzucić okiem, będę wdzięczny. Pozdrawiam
Tomasz
17.11.2011, 20:50
JESTES GENIALNY!|Dzieki !!!:)działa ;)
Bartosz Stefanicki
17.11.2011, 18:20
Autor
@Tomasz: Dodaj atrybut <tt>margin-bottom</tt> dla obrazków: [code lang="css"]#galeria img{ margin-bottom:10px; }[/code]
Tomasz
17.11.2011, 18:04
zadna kombinacja tymi wartosciami, ktore podales nie daje zamierzonego efektu... moze cos jest nie tak gdzies... ale kodu nigdzie nie zmienialem...hmmmm zdejcia sie ewentualnie rozsuwaja na boki, albo sciagaja do siebie ale zadne zdjecie nie chce zejsc z drugiego-jedno na drugim z bardzo mini odstepami
Tomasz
17.11.2011, 18:01
Dzieki, probowalem juz tego i nie zmienia sie to co powinno przykładowo zmieniam pierwszy na 50- zdjecia sie sciagaja (jak szprotki) zmieniam drugi na 50 - odstepy pomiedzy "kolumnami" zwiekszaja sie - wiersze ani drgna-zdjecia sa caly czas jedno na drugim trzeci na 50 px nic nie drgnelo nawet ... i czwarty na 50- znowu szprotki ... takze to nie dziala... nie wiem czemu?
Bartosz Stefanicki
17.11.2011, 17:50
Autor
@Tomasz: Odstęp między zdjęciami ustalisz w arkuszu CSS: [code lang="css"]#galeria ul li{ display: inline; margin:0 10px 10px 0; }[/code] Druga linijka to rozwiązanie problemu, kolejne wartości to odstępy: od góry, od prawej, od dołu, od lewej.
Tomasz
17.11.2011, 16:40
chyba gdzies trzeba pogrzebac w CSS? tylko gdzie..juz probowalem wszystkiego, pomocy :)!!!
Tomasz
17.11.2011, 16:39
Galeria SUPER powiedzcie mi (zielonemu) tylko prosze jak ustawic wiekszy odstep pomiedzy wierszami zdjec? zeby byl jednakowy odstep z kazdej strony pomiedzy zdjeciami, na chwile obecna sa lekko scisniete :) Bede wdzieczny :) super kodzik do nauki :)Pozdrawiam Tomasz
Bartosz Stefanicki
16.11.2011, 21:04
Autor
@Kasia: Gratuluję samozaparcia, nigdy nie należy rezygnować. Pewnie tak, jakiś średnik lub cudzysłów usunęłaś i taki był efekt.
Kasia
16.11.2011, 18:57
Dzięki temu, że Tobie Bartek się udało nie zrezygnowałam. Pewnie jakiś czeski błąd - kilka razy przepisywane. Nie wiem co pokręciłam, po nastym sprawdzaniu DZIAŁA!!
Kasia
15.11.2011, 21:06
Witam, czy jest możliwość załadowania na jednej stronie kilku galerii zdjęć przedzielonych nagłówkami i opisem? Zrobiłam nowe katalogi do kolejnej galerii z innymi nazwami katalogów ("nowe", "nowemin"), wkleiłam po nagłówku powielony php, zmieniłam w nim odpowiednio "obrazki" na "nowe" miniaturki na "nowemin" - niestety nie działa (pewnie durnota?). Da się to zrobić? Jeśli tak, to poproszę o podpowiedź w stylu "kawa na ławę". Niestety w IE pomimo zastosowania albo się chowa pod spód albo nie ładuje się baner. Ale i tak ta galeria jest fajowa!!!
Bartosz Stefanicki
15.11.2011, 22:02
Autor
@Kasia: Przed chwilą spróbowałem wstawić jedną galerię pod drugą i działa. Może napisz jaki błąd się Tobie pojawia?
ADI
15.11.2011, 19:46
Wrzuciłem highslide na stronkę i nie mogę wyczaić jednej rzeczy. wszysto działa oprócz jednego, gdy klikam na miniaturkę to mam wyświetlone "ŁADUJE" i nie wyświetla oryginalnego rozmiaru zdjęcia.
Bartosz Stefanicki
02.11.2011, 19:31
Autor
@Artur, Marcin: Sortowanie obrazków wg. nazwy http://itporady.pl/php-mysql/prosty-skrypt-galerii-zdjec-z-efektem-highslide/comment-page-1/#comment-644
Bartosz Stefanicki
02.11.2011, 19:24
Autor
@Mikołaj, Marcin: Tak, jest możliwość wyświetlenia mniejszej/większej ilości obrazków w poziomie. Zależy to od szerokości div#galeria w arkuszu CSS - domyślnie jest 700px, wystarczy ją zmienić na np. 500px lub 1100px. @Łukasz: Proponuję sprawdzić jeszcze raz ścieżki do obrazków, plików galerii JS - innego powodu nie widzę. @Scooby: Tak, należy utworzyć miniaturki o wym. 200x150px oraz o tej samej nazwie obrazki o wym. 700x525px.
Marcin
20.10.2011, 18:53
a jak ją posortować alfabetycznie??
Marcin
19.10.2011, 11:52
Da się zrobić tak żeby po dwa obrazki w jednej kolumnie poziomej były? :)
Łukasz
29.09.2011, 22:20
dlaczego po dodaniu kolejnych zdjęć niż 1,2,3,4 działa ale np 5,6,7 już nie i później 8 ... działa podgląd, miniaturki prawidłowo się ładują tylko co któreś zdjęcie się nie chce powiększyć. nazwy odnośników i ścieżki są prawidłowe.. jaki może być powód...