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: Bartek Stefanicki.
Tagi: , , , , .

Dodaj komentarz

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

avatar

Sortuj wg:   najnowszy | najstarszy | oceniany
suchy
Gość
suchy
5 lat 9 miesięcy temu

przydały by się jeszcze podpisy do zdjęć gdzieś.. ale tak to fajna galeria, gratki :)

Mokry
Gość
Mokry
2 lat 8 dni temu

Cześć suchy :D kiedy sie walimy

Comandeer
Gość
Comandeer
5 lat 8 miesięcy temu
Właśnie czegoś takiego szukałem! HighSlide. Przykład niezły, ale doczepiłbym się do paru rzeczy: 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 < 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=='highslide' przypisz zdarzenie hs.expand.… Czytaj więcej »
Patryk
Gość
Patryk
5 lat 4 miesięcy temu

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

Bartek Stefanicki
Gość
5 lat 4 miesięcy temu

Odczytaj listę katalogów i pobierz z każdego pierwszy plik miniaturki, następnie podlinkuj je odpowiednio.

Kamil
Gość
Kamil
5 lat 4 miesięcy temu

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?

mariusz
Gość
mariusz
5 lat 4 miesięcy temu

da rade, sam szukam takiego rozwiązania

Kamil
Gość
Kamil
5 lat 4 miesięcy temu

to liczymy na barteksa :) mam nadzieje że nam pomoże!

Gosia
Gość
Gosia
5 lat 4 miesięcy temu

Super, bardzo dziękuję! zainspirowało mnie to do nauki pilnej i szybkiej nauki JS ! :) zamiast np flasha ,

pozdrawiam serdecznie!

Bartek Stefanicki
Gość
5 lat 4 miesięcy temu

Miło mi to słyszeć, powodzenia w nauce. ;)

Kamil
Gość
Kamil
5 lat 4 miesięcy temu

Barteks powiedz proszę czy jest możliwość o którą pytamy

Bartek Stefanicki
Gość
5 lat 4 miesięcy temu

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

<ul>
 $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 =&gt; $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 &lt; $i; $nr++ ){
   print &#039;<li><a href="'.$tab&#91;$nr&#93;&#91;'plik'&#93;.'" rel="nofollow"><img width="200" height="133" src="'.str_replace($katalog, $katalogminiaturki, $tab&#91;$nr&#93;&#91;'plik'&#93;).'" /></a></li>';
}
?&gt;
</ul>
mariusz
Gość
mariusz
5 lat 4 miesięcy temu

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

Bartek Stefanicki
Gość
5 lat 4 miesięcy temu

Skorzystaj z funkcji sort() w celu ułożenia zdjęć rosnąco, odwrotny efekt da rsort().

<ul>
 $value){
        $tab[$i] = $value;
        $i++;
}
sort($tab);

//wyświetlenie listy zgodnie z datą
for($nr = 0; $nr &lt; $i; $nr++){
   print &#039;<li><a href="'.$tab&#91;$nr&#93;.'" rel="nofollow"><img width="200" height="133" src="'.str_replace($katalog, $katalogminiaturki, $tab&#91;$nr&#93;).'" /></a></li>';
}
?&gt;
</ul>
Kris
Gość
Kris
5 lat 4 miesięcy temu

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

jaco
Gość
jaco
5 lat 3 miesięcy temu

witam, panowie co zrobić aby miniaturki zdjec o orientacji pionowej nie rozciagały sie. bede wdzieczny za odpowiedz na meila

Bartek Stefanicki
Gość
5 lat 3 miesięcy temu

Jaco,

Obrazki mają zdefiniowaną szerokość (width) i wysokość (height) czyli do podanych wymiarów zdjęcia są ewentualnie powiększane. Możesz to zmienić w poniższym fragmencie kodu:

<img width="200" height="133" src="'.$katalogminiaturki.'/'.$zdjecie.'" alt="Zdjęcie: '.$zdjecie.'" /></a>
jaco
Gość
jaco
5 lat 3 miesięcy temu

noo tak to wiem ze mozna to zmienic. Ale jezeli dopasuje wymiary do zdjec pionowych to znowu zdjecia z orientacja pozioma mi znieksztalci:-/ mozna jakos to zoptymalizowac, aby dla zdjec poziomych miniaturka miala inny wymiar niz dla zdjec pionowych. Ma ktos pomysl jak to rozwiazac.

Kamil
Gość
Kamil
5 lat 3 miesięcy temu

ja kadruję sobie miniaturke do wymiarów 200x133 i jest ok :)

jaco
Gość
jaco
5 lat 3 miesięcy temu

ale masz wszystkie zdjecia w jednej orientacji tak? nie masz w jednej galeri zdjec poziomych i pionowych. bo jezeli ustawisz miniturke zdjecia pinowego na wymiary 200x133 to ci je rozszerzy i bedzie do dupy. Czy jest mozliwosc napisania funkcji ktora dziala podobnie jak opcja "zmiesc obraz" w photoshopie. tam poprostu ogranicasz pixele w ktorych ma sie zmiescic zdjecie. jak mi ktos pomorze bede bardzo wdzieczny bo widze ze nie wszyscy rozumia moj problem:P

Kamil
Gość
Kamil
5 lat 3 miesięcy temu

nie, mam i poziome i pionowe, z pionowych miniatur robie poziome (MINIATUR!) więc jak klikniesz na miniature to zdj bedzie pionowe,
miniatura nie ma nic wspolnego z glownym zdj (prócz nazwy) możesz do folderu miniatury wrzucic nawet obrazki oznaczone 1 2 3 i po kliknieciu na 1 bedzie duze zdj :)

jaco
Gość
jaco
5 lat 3 miesięcy temu

czyli ty po prostu masz wszystkie miniturki w orientacji poziomej. inaczej kadrujesz zdjecie a mi chodzi o to zeby w miniaturce bylo widac cale zdjecie. poziome mialo np wymiat 200x133 a pionowe 133x200

Kamil
Gość
Kamil
5 lat 3 miesięcy temu

wracając do photoshopa, pomniejsz sobie zdjęcie na wys 133
dajesz obrazek->rozmiar roboczy
i w szerokości wpisujesz 200, (opcja względnie ma być odznaczona)
kolor ustawiasz sobie jaki tam masz tło strony, białe, czarne itp

aby skrócić czas pracy to dajesz sobie operacje
po prawej taki przycisk jak by play
dajesz nową operację i robisz to co wyżej, następnie dajesz stop.
po otwarciu kolejnego zdjęcia dajesz play

jaco
Gość
jaco
5 lat 2 miesięcy temu

witam ponownie, mam kolejne pytanko i prosze o pomoc;-)
o to moja galeria: http://www.fotorozycki.nazwa.pl/jacek/galeria/ mam zdjecia o roznych rozmiarach! jezeli otworze zdjecie np (_MG-9674.jpg) to one oczywiscie wyswietla mi sie na srodku, ale jezeli przejde do nastepnego to juz jest na dole, przy dolnej krawedzi poprzedniego zdjecia. co zrobic zeby kazde zdjecie wyswietlało sie na srodku??? jezeli zostaje otoworzone jako pierwsze to oczywiscie jest na srodku, ale jezeli kolejne zdjecie jest wieksze to jezeli wrocimy do tego 1 to zmienia sie jego ustawienie. HELP ME:P hehe z gory dzieki

jaco
Gość
jaco
5 lat 2 miesięcy temu

jeszcze jedno, cala galeria nie jest centralnie na srodku jest przesunieta o kilka px w prawo. jak to zmienic bo nigdzie nie moge zniwelowac tego przesuniecia. gdzie jest ten parametr POZDRO

Kamil
Gość
Kamil
5 lat 2 miesięcy temu

wg mnie to kwestia przeglądarki, rozdzielczosci monitora itp

sprawdziłęm dokladnie twoja galerie wstecz dalej inne zdj otworzylem, i u mnie zawsze na srodku jest zdjecie

Kamil
Gość
Kamil
5 lat 2 miesięcy temu

html, ?

jaco
Gość
jaco
5 lat 2 miesięcy temu

a jakiej przegladarki uzywasz? tzn zdjecia sa zawsze na srodku jezeli chodzi o poziom, a jezeli chodzi o pion to sie opuszczaja do dolu:/ a z tym przesunieciem miniaturek w prawo?? co myslisz?

jaco2244
Gość
jaco2244
5 lat 2 miesięcy temu

W IE oraz MOZILLI galeria(tzn miniaturki) sa przesuniete delikatnie w prawo. A obrazy po otwarciu schodza na dol, sa na srodku ale na dole a nie w centralnym pkt ekranu. niby to sa szczegoly ale psuje to troche ogolne wrazenie galeri

jaco
Gość
jaco
5 lat 2 miesięcy temu

a czy znasz moze jakies inne skrypty podobnie wygladajacych galeri??? jezeli tak to wrzuc mi linki albo skrypty

Kamil
Gość
Kamil
5 lat 2 miesięcy temu

Ja Operę mam.
wszystko jest ok,
co do środka to html i znacznik skrypt galerii
usuń gwiazdki

jaco
Gość
jaco
5 lat 2 miesięcy temu

jakie gwiazdki??? znalazlem tylko rzad gwiazdek w javascript? mozesz troche jasniej??? srednio biegly jestem w tych tematach

Kamil
Gość
Kamil
5 lat 2 miesięcy temu

a bo sie nie pokazuje tutaj znasz troche html? to zrob znacznik center do galerii :)

wpDiscuz