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

Gregory
02.02.2012, 16:22
strona napisana jest w html
Gregory
02.02.2012, 16:20
Witam, mam pytanie, podkreślam od razu że dopiero uczę się tworzenia stron więc proszę o wyrozumiałość...pytanie brzmi... jak podpiąć ten skrypt do strony
Bartosz Stefanicki
08.01.2012, 21:02
Autor
@Kamel: Zmniejsz szerokość głównego bloku, który obejmuje galerię: [code lang="css"]#galeria{ width: 700px; }[/code] Na wartość np. 500 px, ponieważ u mnie obrazki mają szer. 200 px.
kamel
07.01.2012, 02:47
witam. Bardzo mi sie podoba ten skrypt, ale poniewaz jestem bardzo poczatkujacy to mam klopot z ulozeniem zdjec w dwuch kolumnach. Jak zmienic, aby miniaturki bylu w dwuch a nie trzech kolumnach?
Bartosz Stefanicki
25.12.2011, 18:13
Autor
@Piotrek: Zgadza się, nie zapomnij podmienić nazw katalogów. Jeśli dalej nie będzie działać to sprawdź czy odpowiednie funkcje masz włączone na serwerze.
Piotrek
25.12.2011, 16:07
Ok już zrozumiałem jak to ma zadziałać. Przyznaje że zabawę z php dopiero zaczynam. Mam jeszcze jedno pytanie aby posortować fotki według nazwy wystarczy podmienić zawartość div id="galeria" na te z punktu Sortowanie zdjęć według nazwy? Bo coś mi to nie działa
Bartosz Stefanicki
25.12.2011, 13:46
Autor
@Piotrek: Tak, z pominięciem znaczników html, head, body etc. Skopiuj zawartość nagłówka z powyższego przykładu i przenieś w odpowiednie miejsce do pliku swojej podstrony. Podobnie z kodem galerii - wklej ją w miejsce, w którym chcesz żeby się wyświetlała. W razie dalszych pytań, pisz.
Piotrek
25.12.2011, 13:27
Kod z pierwszego punktu czyli dokładnie całość pliku index.php?
Bartosz Stefanicki
25.12.2011, 12:47
Autor
@Piotrek: Kopiujesz kod zawarty w pkt. 1 porady, następnie linkujesz do arkusza stylów CSS (warto zapisać go w osobnym pliku i potem tylko się do niego odwoływać). @Rafał: Poszukaj na wskazanej stronie, w Google, forach dla webmasterów/programistów.
Rafał
24.12.2011, 14:08
Witam... Mam prozbę czy mógłbyś mi napisać zmianę tego kodu ponieważ zabawę z PHP dopiero zaczynam ??
Piotrek
23.12.2011, 19:58
A jaki kod trzeba dodać na podstronie na której ma się wyświetlić galeria?
Bartosz Stefanicki
22.12.2011, 23:57
Autor
@Adaś: Licencja skryptu Highslide, który obsługuje animacje i powiększanie zdjęć w galerii jest tutaj: http://shop.highsoft.com/highslide.html. @Rafał: Skrypt pracuje lokalnie - to znaczy podajesz ścieżkę do katalogu na tym samym serwerze. Jeśli chcesz korzystać ze ścieżki zewnętrznej to poszukaj odpowiedniej funkcji/rozwiązania na http://php.net.
Rafał
22.12.2011, 08:33
Jak zrobić by ten skrypt pobierał zdjęcia z innego serwera ??
adaś
21.12.2011, 13:56
Bartek to co obejmuje licencja dokładniej ?
Mariusz
18.12.2011, 02:35
warto by było dodać, że jak ktoś chce zmienić lokalizacje swoich plików tak aby miał pożądek to panie Bartku mozna by poinformować o tym, że w css trzeba zmienić lokalizacje wyswietlanych w środku pasku nawigacji ikony . !!!!
Bartosz Stefanicki
13.12.2011, 13:22
Autor
@Adam: Miniaturki mają ramkę - jej kolor ustawisz w selektorze: <tt>#galeria img</tt>.
ADAM
13.12.2011, 13:14
a jak zrobić by miniaturki miały ramkę ?
Kasia
05.12.2011, 20:31
Na stronie mam kilka osobnych galerii przedzielonych tekstami, nagłówkami. Przy oglądaniu jednej galerii (powiększaniu) automatycznie przechodzi się do następnej, pomimo tego, że zdjęcia kolejnej galerii są w innych katalogach. Czy można zatrzymać przeglądanie na ostatnim zdjęciu TEJ galerii?? a nie na ostatnim z ostatniej galerii?
Bartosz Stefanicki
03.12.2011, 15:12
Autor
@Łukasz: Skrypt galerii zdjęć został napisany przeze mnie i możesz go używać, zarówno na witrynach prywatnych jak i komercyjnych. Inną kwestią jest nakładka graficzna (efekt prezentacji zdjęć, pokaz slajdów itp.) która ma określone w licencji w jaki sposób można z niej korzystać: - Non-commercial: Free - Commercial Single Website: $29 - Commercial Unlimited: $179
Łukasz
02.12.2011, 15:18
<blockquote>No wszystko fajnie tylko do zastosowań komercyjnych trochę za highslide trzeba zapłacić 29/179 dolców zależy za jaką licencję.</blockquote> Czy można tego skryptu używać za darmo?