Prosty skrypt galerii zdjęć z efektem Highslide

Prosty skrypt galerii zdjęć z efektem Highslide
W kategorii: HTML + CSS, PHP + MySQL. Tagi: , ,

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.


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

#1: 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 nieaktywane)
  • 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>

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>

#2: 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/.

#3: 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.

Zobacz podglądPobierz plik

Podobne porady

Komentarze (109)

  1. Łukasz pisze:
    2 grudnia 2011 o 14:18

    No wszystko fajnie tylko do zastosowań komercyjnych trochę za highslide trzeba zapłacić 29/179 dolców zależy za jaką licencję.

    Czy można tego skryptu używać za darmo?

  2. Bartek pisze:
    3 grudnia 2011 o 14:12

    @Ł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

  3. Kasia pisze:
    5 grudnia 2011 o 19: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?

  4. ADAM pisze:
    13 grudnia 2011 o 12:14

    a jak zrobić by miniaturki miały ramkę ?

  5. Bartek pisze:
    13 grudnia 2011 o 12:22

    @Adam:
    Miniaturki mają ramkę - jej kolor ustawisz w selektorze: #galeria img.

  6. Mariusz pisze:
    18 grudnia 2011 o 01: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 . !!!!

  7. adaś pisze:
    21 grudnia 2011 o 12:56

    Bartek to co obejmuje licencja dokładniej ?

  8. Rafał pisze:
    22 grudnia 2011 o 07:33

    Jak zrobić by ten skrypt pobierał zdjęcia z innego serwera ??

  9. Bartek pisze:
    22 grudnia 2011 o 22:57

    @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.

  10. Piotrek pisze:
    23 grudnia 2011 o 18:58

    A jaki kod trzeba dodać na podstronie na której ma się wyświetlić galeria?

  11. Rafał pisze:
    24 grudnia 2011 o 13:08

    Witam... Mam prozbę czy mógłbyś mi napisać zmianę tego kodu ponieważ zabawę z PHP dopiero zaczynam ??

  12. Bartek pisze:
    25 grudnia 2011 o 11:47

    @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.

  13. Piotrek pisze:
    25 grudnia 2011 o 12:27

    Kod z pierwszego punktu czyli dokładnie całość pliku index.php?

  14. Bartek pisze:
    25 grudnia 2011 o 12:46

    @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.

  15. Piotrek pisze:
    25 grudnia 2011 o 15: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

  16. Bartek pisze:
    25 grudnia 2011 o 17:13

    @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.

  17. kamel pisze:
    7 stycznia 2012 o 01: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?

  18. Bartek pisze:
    8 stycznia 2012 o 20:02

    @Kamel:
    Zmniejsz szerokość głównego bloku, który obejmuje galerię:

    #galeria{
    width: 700px;
    }

    Na wartość np. 500 px, ponieważ u mnie obrazki mają szer. 200 px.

  19. Gregory pisze:
    2 lutego 2012 o 15: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

  20. Gregory pisze:
    2 lutego 2012 o 15:22

    strona napisana jest w html

  21. Kamil pisze:
    4 lutego 2012 o 23:58

    hej! u mnie w galerii odstępy między wierszami a kolumnami są różne, da się zrobić aby były jednakowe?

  22. Bartek pisze:
    8 lutego 2012 o 18:57

    @Gregory:

    Zapisz plik strony pod rozszerzeniem .php. Twój serwer musi obsługiwać PHP, ale z tym raczej nie ma problemów.

  23. Bartek pisze:
    8 lutego 2012 o 18:58

    @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

  24. Wojciech pisze:
    15 lutego 2012 o 16: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??

  25. Seba pisze:
    17 lutego 2012 o 11:56

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

  26. Błażej pisze:
    19 lutego 2012 o 15:21

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

  27. Bartek pisze:
    20 lutego 2012 o 20:38

    @Wojciech,

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

  28. Bartek pisze:
    20 lutego 2012 o 20:39

    @Seba,

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

  29. Bartek pisze:
    20 lutego 2012 o 20:40

    @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).

« Starsze komentarze

Dodaj komentarz

Pola w formularzu oznaczone * gwiazdką są wymagane. Jeśli chcesz załączyć kod, wstaw go do odpowiedniego znacznika (do wyboru: php, html, css):
[code lang="php"]<?php ?>[/code]

Imię *
Email * Adres strony
Treść *