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

mariusz
20.01.2011, 13:05
a czy można zrobić, aby wyświetlalo, się kolejno czyli od malejącego do rosnącego ? ponieważ według daty to trochę mi nie leży to :) dziekuje z góry
Bartosz Stefanicki
22.01.2011, 23:22
Autor
Skorzystaj z funkcji sort() w celu ułożenia zdjęć rosnąco, odwrotny efekt da rsort(). [code lang="php"]<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>[/code]
Bartosz Stefanicki
15.01.2011, 17:36
Autor
@Kamil, Mariusz Jest taka możliwość, listę plików należy wrzucić do tablicy a następnie posortować. Poniżej zamieszczam takie rozwiązanie, obrazki wyświetlają się zgodnie z datą malejąco. [code lang="php"]<div id="galeria"> <ul> <?php $katalog = "obrazki"; $katalogminiaturki = "miniaturki"; $pliki = glob($katalog.'/*.jpg'); $i=0; //lista plików trafia do tablicy foreach($pliki as $key => $value){ $data = date('Y-m-d H:i:s', filemtime($value)); $tab[$i]['data'] = $data; $tab[$i]['plik'] = $value; $i++; } //sortowanie listy plików wg. daty malejąco foreach ($tab as $klucz => $wiersz){ $date[$klucz] = $wiersz['data']; $plik[$klucz] = $wiersz['plik']; } array_multisort($date, SORT_DESC, $plik, SORT_DESC, $tab); //wyświetlenie listy zgodnie z datą for( $nr = 0; $nr < $i; $nr++ ){ print '<li><a href="'.$tab[$nr]['plik'].'" class="highslide" onclick="return hs.expand(this)" rel="nofollow"><img width="200" height="133" src="'.str_replace($katalog, $katalogminiaturki, $tab[$nr]['plik']).'" /></a></li>'; } ?> </ul> </div>[/code]
Kamil
12.01.2011, 22:20
Barteks powiedz proszę czy jest możliwość o którą pytamy
Gosia
12.01.2011, 00:37
Super, bardzo dziękuję! zainspirowało mnie to do nauki pilnej i szybkiej nauki JS ! :) zamiast np flasha , pozdrawiam serdecznie!
Bartosz Stefanicki
12.01.2011, 21:00
Autor
Miło mi to słyszeć, powodzenia w nauce. ;)
Kamil
09.01.2011, 01:07
to liczymy na barteksa :) mam nadzieje że nam pomoże!
mariusz
08.01.2011, 22:02
da rade, sam szukam takiego rozwiązania
Kamil
08.01.2011, 18:56
a da się zrobić żeby zdjęcia wyświetlały się po kolei? czy wyświetlają się? jak tak to wg czego? napewno nie nazwy, może wagi?
Bartosz Stefanicki
07.01.2011, 00:00
Autor
Odczytaj listę katalogów i pobierz z każdego pierwszy plik miniaturki, następnie podlinkuj je odpowiednio.
Patryk
06.01.2011, 18:37
czy jest taka możliwość aby skrypt odczytywał tylko jedną miniaturkę, a po kliknięciu w nią pokazywał dopiero całą zawartość /obrazki. Obecnie jest tak, że miniaturka=obrazki
Comandeer
30.08.2010, 22:40
Właśnie czegoś takiego szukałem! HighSlide. Przykład niezły, ale doczepiłbym się do paru rzeczy: [code lang="html"][/code] Uruchom sobie teraz tą stronę i sprawdź nagłówki HTTP: text/html. application/xhtml+xml wymusza się przez header w PHP. Zresztą jesteś pewien, że ci to potrzebne? IE &lt; 9 nie obsługuje tego, googlebot tak samo, a drakońskie sprawdzanie błędów XML jest troszkę za bardzo upierdliwe. Niby demko działa w trybie XML, ale stworzyć niepoprawny dokument jest łatwo, zbyt łatwo... Jeszcze jedno rzuca mi się w oczy. Zamiast powtarzać onclick dla każdego li, przy window.onload pobierz sobie wszystkie li przez getElementsByTagName i następnie dla tych, których className==&#039;highslide&#039; przypisz zdarzenie hs.expand. Ba, wydaje mi się nawet, że klasa jest niepotrzebna w tym wypadku.
suchy
13.08.2010, 16:24
przydały by się jeszcze podpisy do zdjęć gdzieś.. ale tak to fajna galeria, gratki :)
Mokry
19.05.2014, 13:06
Cześć suchy :D kiedy sie walimy