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.

Opublikowałem kolejną, bardziej rozbudowaną wersję skryptu: Prosty skrypt galerii zdjęć z efektem Highslide – wersja 2.

#1. Struktura plików i katalogów

Galeria składać się będzie z następujących folderów i dokumentów.

#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>

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

Podgląd Pobierz

Opublikowano: 30 kwietnia 2010. Autor: Bartosz Stefanicki.
Tagi: , , , , .

Dodaj komentarz

233 komentarzy do "Prosty skrypt galerii zdjęć z efektem Highslide"

avatar

Sortuj wg:   najnowszy | najstarszy | oceniany
Piotr
Gość
Piotr
5 miesięcy 11 dni temu

Witam,
Jak dla mnie brakuje funkcji automatycznie tworzącej miniaturę ze zdjęcia w katalogu /obrazki/.
Mógłby Pan objaśnić jak to zrobić ?

Karol
Gość
Karol
5 miesięcy 18 dni temu

Witam. Mam problem z sortowaniem zdjęć naturalnie. Korzystałem z punktu 2.1 jednak nie przynosi to rezultatów. Ciągle mi sortuje 1, 10, 11,12...,19, 2, 20,21...itd. Próbowałem zmienić sort($tab); na natcasesort($tab); i milion innych sposobów łącznie z innymi pętlami. Przeczytałem wcześniejsze komentarze, niektórzy również pisali o tym problemie jednak punkt porad 2.1 im pomagał. W czym jeszcze może tkwić problem?

Karol
Gość
Karol
5 miesięcy 10 dni temu

Ciągle blokuje mój kod, gdy go chcę umieścic w komentarzu. Proszę o usunięcie bezwartościowych komentarzy.

Karol
Gość
Karol
5 miesięcy 10 dni temu

Jakby ktoś miał problem jak ja powyżej wklejam tu rozwiązanie:

[code lang="php"]$wartosc){
echo '<img width="200" height="133" src="'.$wartosc.'" alt="" ';
}
?>[/code]

Karol
Gość
Karol
5 miesięcy 10 dni temu

$wartosc)
{
echo '<img width="200" height="133" src="'.$wartosc.'" alt="" ';
}
?>

------------------------------------------------------------------------------------------------------------------------------------------------
Nie mogłem tego wkleić więc napisałem ręcznie. Nie używam folderu "miniaturki" moim zdaniem nic on nie wnosi. Zdjęcia minimalizujemy poprzez " img width="200" height="133" " .

Adrian
Gość
5 miesięcy 21 dni temu

Witam, chciałbym aby galeria ukazywała zdjęcia w kolejności mam nazwane foty numerycznie od 1 do 80 ale w galerii mają one losową kolejność, jak to naprawić ?

Adrian
Gość
5 miesięcy 21 dni temu

próbuję jednak nie wiek w którym dokładnie miejscu wkleić ten kod

Adrian
Gość
5 miesięcy 21 dni temu

okej wyszło na to że popełniłem błąd nowicjusza :D skopiowałem bez zamknięcia klamry :D

Aneta
Gość
Aneta
6 miesięcy 18 dni temu

Witam, jak usunąć białą ramkę przy dużym zdjęciu?

Karolina
Gość
Karolina
7 miesięcy 18 dni temu

Witam, może to banalne pytanie, ale jestem początkująca... gdzie i co umieścić na stronie w kodach, aby mi się w ogóle wyświetlała ta galeria? Ściągnęłam całość do mojego folderu ze stroną www i teraz jak otwieram swój index.html chciałabym gdzieś w tych kodach coś wpisać aby mi się galeria pokazywała? Gdzie to mogę uczynić?

Tomasz
Gość
Tomasz
8 miesięcy 8 dni temu

Czy - mogę poprosić na maila przykład - niestety słabo znam css

Dziękuje

Tomasz
Gość
Tomasz
8 miesięcy 8 dni temu

OK - już sobie poradziłem - tylko teraz powstał następny problem - miniaturki nie są równo poukładane - czy można miniaturki tak posortować aby były równo - np pierw wszystkie w pionie później w poziomie ?

Tomasz
Gość
Tomasz
8 miesięcy 8 dni temu

Witam - gdzie zmienia się parametr w css aby zdjęcia pionowe w miniaturkach wyświetlały się poprawnie - teraz zdj poziome wyświetlane sa OK natomiast pionowe rozciągnięte

Dzieki

Daniel
Gość
Daniel
10 miesięcy 27 dni temu

Warning: sort() expects parameter 1 to be array, null given in
podczas sortowania. :/

Tape
Gość
Tape
11 miesięcy 3 dni temu

Jest opcja ustawienia tak aby highslide domyślnie się uruchamiało w miniaturce z innych zdjęć (tak aby każda miniatura była sliderem 4-6 zdjęć a po powiększeniu wyświetlało się inne statyczne, czy lepiej użyć gifa?).

Łukasz
Gość
Łukasz
11 miesięcy 30 dni temu

Witam a jak zrobić żeby były również wyświetlane zdjęcia pionowe?

SalyWan
Gość
SalyWan
1 rok 19 godzin temu

Ja mam taki sam błąd jak kolega Łukasz. Nie mogę jednak go naprawić. Mianowicie chodzi pokazuje mi się jedno okienko bez zdjęcia i obok "'; } } closedir($galeria); ?>".

Marta
Gość
Marta
1 rok 8 dni temu

hej a w jaki sposób mozna zmienić ilość zdjęć miniaturek? wyswietla mi 15 zdjec podczas gdy w katalogu mam 50

Łukasz
Gość
1 rok 29 dni temu

Siemka, wrzuciłem całą paczkę plików którą od Ciebie pobrałem, ale u mnie niestety wyestepuje błąd i nie mogę go zdiagnozować. Mozesz pomóc ;)?

Łukasz
Gość
1 rok 29 dni temu

Już sobie poradziłem, ale ostatnia linijka fotek jest lekko przesunięta w lewo, jakoś uda sięto naprawić?

Kamil
Gość
1 rok 1 miesiąc temu

Bardzo fajny skrypcik, w łatwy sposób udało mi się go wklepać w grafikę mojej strony, można zobaczyć na http://www.djlama.pl/galeria.php .

Dobra robota, dziękuję w imieniu wszystkich którzy korzystają z zadowoleniem!

adrian
Gość
adrian
7 miesięcy 2 dni temu

pokazuje mi się jedno okienko bez zdjęcia i obok "'; } } closedir($galeria); ?>".

kaśka
Gość
1 rok 1 miesiąc temu

Witam, super skrypt!!
a czy dałoby radę zrobić galerię w wersji responsywnej?

Demon
Gość
1 rok 3 miesięcy temu

Nie działa :c po kliknięciu na miniature pisze loading... i tyle :c

Arek
Gość
Arek
1 rok 6 miesięcy temu

Tworzę stronę na której chciałbym umieścić ten skrypt.
Czy do swojej prywatnej strony mogę go prawnie wykorzystać?
Jak to jest ze stroną dajmy na to jakiejś firmy? Czy trzeba wykupić jakieś prawa do korzystania z tego skryptu?

ANDRZEJ
Gość
ANDRZEJ
1 rok 9 miesięcy temu

Proszę jak wyżej o ten kawałek kodu , żeby wyświetlić nazwę zdjęcia na miniaturkach.Nie wiem jak to zrobić.
Dziękuje za szybka reakcję

Michał
Gość
Michał
1 rok 10 miesięcy temu

chcę wykorzystać tą galerię do szablonu na allegro. Co muszę zrobić oprócz takiej zmiany

[code]<

>[/code]

mam wszystkie pliki i foldery na serwerze ale nie wiem jak podpiąć galerię do szablonu. Gdy dam szablon na serwer i nazwę index.html to wszystko super działa, ale poza już nie...

tomasz
Gość
tomasz
2 lat 3 miesięcy temu

Panowie a dlaczego wyswietlają mi sie takie znaki "ďťż " a jak sprawdze skad to się bierze to jest cos takiego napisane "Failed to load resource: the server responded with a status of 404 (Not Found)". Proszę o pomoc.

Rufi
Gość
2 lat 4 miesięcy temu

Wielkie dzięki za pomoc - ja jako kompletna noga w tworzeniu czegokolwiek - udało mi się stworzyć galerie i zajęło mi to tylko 2 godzimy , wpisując ją w stronę.

Bartosz Stefanicki
Gość
2 lat 4 miesięcy temu

Cieszę się, zachęcam do przeglądu reszty skryptów :)

Karolina
Gość
Karolina
2 lat 9 miesięcy temu

Cześć mam pytanie, zrobiłam tak jak po kolei kazałeś. Wszystko mi pięknie wyszło, ale jak zmodyfikować skrypt, żeby obrazki występowały w ciągu po sobie (poziomo) a nie w rzędach ???

Bartosz Stefanicki
Gość
Bartosz Stefanicki
2 lat 9 miesięcy temu

Możesz zmniejszyć szerokość bloku galerii zdjeć za pomocą CSS ( weight ).

Tomasz
Gość
Tomasz
2 lat 9 miesięcy temu

witam. W moim przypadku niektóre zdjęcia nie pokazują się na stronie np. wrzucam do katalogu zdjecia i miniaturki po 5 zdjec a na stronie wyswietlają mi sie tylko 3 pierwsze. Co moze byc ctego przyczyną?

Paweł
Gość
Paweł
3 lat 20 dni temu

Witam, mam pytanie odnośnie galerii. Korzystam z szablonu www i mam problem żeby na stronie wyświetliła się galeria w moim szablonie a nie jako zwykła biała strona jak to zrobić ?

Bartosz Stefanicki
Gość
Bartosz Stefanicki
3 lat 17 dni temu

Masz plik z rozszerzeniem .php ?

Tomasz
Gość
3 lat 3 miesięcy temu

Witam chciałbym zapytać jak dodać w oknie wyświetlonego obrazu odnośnik, np żeby zdjęcie prezentowało jakąś realizacje strony internetowej i był link właśnie do tej strony.
Byłbym wdzięczny za rozwiązanie mojego problemu

wojteke
Gość
wojteke
3 lat 4 miesięcy temu

witam, ja mam taki problem że po kliknięciu na zdjęcie pojawia się napis loading ... i tak cały czas się to kółeczko obraca ale zdjęć nie wczytuje? W czym może być problem?

Bartosz Stefanicki
Gość
Bartosz Stefanicki
3 lat 4 miesięcy temu

Witaj, lokalizacja obrazków jest w porządku (przynajmniej tych dużych), sprawdź czy wgrane są wszystkie pliki skryptu Highslide.

Marcin
Gość
Marcin
3 lat 4 miesięcy temu

Zacząłem tetować i bradzo mi się spodobał zwłaszcza, że miniaturki i duże zdjęcia są pobierane z plików. Jednak gdy chciałem dostosować do swoich potrzeb już było gorzej.I tu mam 2 problemy.1 Nie wiem czym w css steruje się pozycją wyświetlanych miniaturek. Próbowałem edytować kilka styli ale opcja padding nie dała rezyltatu. Natomiast problem 2 to co trzeba zmienić by miniaturki zachowywały proporcje czy chociaż samą wysokość bo nie bardzo chciał przycinać niektóre zdjęcia a jeśli tego się nie zrobi to miniaturki się zniekształcają.

Bartosz Stefanicki
Gość
Bartosz Stefanicki
3 lat 4 miesięcy temu

[code lang="css"]#galeria ul li{
display: inline;
margin:0 10px 10px 0;
}

#galeria img{
border: 1px solid #bbb;
padding: 1px;
}
[/code]

Fragment z wykazem (ul li) , zawiera odstępy między obrazkami. Natomiast we fragmencie z obrazkiem (img) , możesz zdefiniować szerokość i wysokość miniaturek.

PS. Zobacz tez drugą wersję galerii: http://itporady.pl/html-css/prosty-skrypt-galerii-zdjec-z-efektem-highslide-wersja-2/

Jarek
Gość
Jarek
3 lat 7 miesięcy temu

jak zrobić podstrony bo zdjęć mam już 50 i się ciężko przeglada ??

Jarek
Gość
Jarek
3 lat 7 miesięcy temu

super :)

A kiedy możemy się spodziewać następnej wersji :)

Bartosz Stefanicki
Gość
Bartosz Stefanicki
3 lat 7 miesięcy temu

@Jarek,

Myślę, że w ciągu 2 tygodni.

Bartosz Stefanicki
Gość
Bartosz Stefanicki
3 lat 7 miesięcy temu

@Jarek,

Podział na strony będzie w następnej wersji galerii :-)

Damian
Gość
Damian
3 lat 7 miesięcy temu

Cześć Bartku.
Głowie się nad wspomnianym już wyżej dodawaniem podpisu pod obrazkiem.
Mam problem z wyciągnięciem nazwy pliku.

Jeśli zostało Ci trochę cierpliwości to proszę o pomoc :)

Pozdrawiam

Bartosz Stefanicki
Gość
Bartosz Stefanicki
3 lat 7 miesięcy temu

@Damian,

W $tab[$nr] znajduje się nazwa pliku, wyciągnij ją i wywołaj za pomocą np. funkcji print.

M.
Gość
M.
3 lat 7 miesięcy temu

przyłączam się do prośby :)

M.
Gość
M.
3 lat 9 miesięcy temu

Witam, czy można powiększyć liczbę kolumn? bo nie widzę tego nigdzie w kodzie? Albo jakieś podstrony, bo ja mam dość dużo obrazków. Najlepiej żeby zmienić te trzy kolumny na np pięć.
I jak wydobyć z kodu galerii te podpisy pod zdjęciem?

Bartosz Stefanicki
Gość
Bartosz Stefanicki
3 lat 7 miesięcy temu

@M.

Pewnie. Za pomocą CSS możesz zmienić szerokość galerii, parametr width.

M.
Gość
M.
3 lat 7 miesięcy temu

Ja dałam 1100px i mam 5 kolumn ;)

noe
Gość
noe
3 lat 8 miesięcy temu

dobra, juz nie wazne ;)
wystarczy wejsc w styl.css i w #galeria zmienic 'width' na większy, np 900px ;) (przy 900 są 4 kolumny)

noe
Gość
noe
3 lat 8 miesięcy temu

mam ten sam problem - 3 kolumny to ciut za mało, potrzebowałbym 5, tylko nie bardzo wiem gdzie to zmienic... łaze po tym kodzie w te i z powrotem i kicha
btw. swietna galeria - wyglada i dziala znakomicie - wlasnie tego potrzebowalem ;)

wpDiscuz