Galeria z Lightbox’em

Autor: Arkadiusz Tobiasz 10 lipca 2010

Często na swojej stronie chcemy mieć galerię, gdzie będziemy prezentować różnego rodzaju zdjęcia. Dobrze by było, aby galeria ta posiadała przyjazny wygląd, a wyświetlanie zdjęć było przyjemne i użyteczne dla oglądających. W tym celu najlepiej wykorzystać Lightbox’a i skrypt TimThumb.

O tym jak na swojej stronie uruchomić Lightbox’a nie będę pisał kolejny raz. W tym celu odsyłam do wcześniejszego wpisu. Po wykonaniu kroków w nim zawartych możemy przystąpić do kolejnego. Musimy ściągnąć skrypt TimThumb. Możemy to zrobić na tej stronie.

Za co odpowiada ten skrypt? Będzie on tworzył miniatury naszych zdjęć, które zapisze w katalogu cache/. Wrzucamy plik do katalogu głównego naszej strony i tworzymy też wspomniany katalog, któremu nadajemy chmod 777.

Teraz możemy przejść do naszej galerii. Rozpoczniemy od zdefiniowania stylów odpowiedzialnych za wyświetlanie całej galerii, jak i poszczególnych miniatur.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.album .desc {
/* required for description */
   margin:0px 10px 10px 0px;
   padding:5px;
}

.album-thumbnail-box {
    float: left;
}

.album-thumbnail {
    float: left;
    margin-right: 5px;
    text-align: center;
}

.album-thumbnail img {
    background-color:#FFFFFF;
    border:1px solid #A9A9A9;
    display:block;  
    margin:4px 0px 4px 5px;
    padding:4px;
    position:relative;
}

.album-thumbnail img:hover {
    background-color: #A9A9A9;
}

.album-thumbnail span {
    /* Images description */
    font-size:90%;
    padding-left:5px;
    display:block;
}

.album-clear {
    clear: both;
}

Mając zdefiniowany styl możemy przystąpić do projektowania galerii. Nasza galeria będzie składać się z opisu oraz wyświetlania miniatur. Po kliknięciu w miniaturę zdjęcie zostanie powiększone z wykorzystaniem efektu Lightbox”a.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="album">

<div class="desc">Zobacz zdjęcia z FOX TCA PArty 2010.</div>

<div class="album-thumbnail-box">
<div class="album-thumbnail"><a href="zdjecie.jpg" class="lightbox" rel="lightbox[117]"><img src="timthumb.php?src=zdjecie.jpg&h=100&w=130&zc=1" alt=""></a>
</div>
</div>

<div class="album-thumbnail-box">
<div class="album-thumbnail"><a href="zdjecie2.jpg" class="lightbox" rel="lightbox[117]"><img src="timthumb.php?src=zdjecie2.jpg&h=100&w=130&zc=1" alt=""></a>
</div>
</div>

</div>

Do odnośnika odsyłającego do oryginału zdjęcia dodajemy parametr class=”lightbox” i rel=”lightbox[117]. Drugi parametr w nawiasach kwadratowych ma cyfrę i jest ona taka sama dla wszystkich zdjęć w danej galerii czy albumie. Dzięki temu przy kliknięciu w zdjęcie pojawiają się strzałki po lewej i prawej stronie, które pozwalają na oglądanie kolejnych zdjęć.

Natomiast skrypt TimThumb ma parametr src, który jest ścieżką względną do pliku z oryginalnym zdjęciem. Kolejne dwa parametry h i w określają wysokość i szerokość miniaturki. Natomiast ostatni zc określa czy zdjęcie ma być rozciągnięte do tych wymiarów (zc = 0), czy też wyśrodkowane i ucięte (zc = 1). W folderze cache/ na serwerze powinny być utworzone wygenerowane miniaturki, dzięki temu skrypt TimThumb przy każdym wywołaniu galerii nie generuje od nowa miniaturek, tylko odsyła do tych znajdujących się w folderze.

Działającą galerię możecie zobaczyć tutaj.

komentarze 4

  1. getme napisał(a):

    Walczę ze stworzeniem miniaturek i niestety poległam. Mam kilka pytań. Co to znaczy, że katalogowi nadajemy chmod 777? Ściągnęłam TimThumb i zapisałam jako plik php w głównym katalogu ze stroną. Zdjęcia mam w podkatalogu galeria. Do pliku styli css dodałam odpowiednie zapisy (dziękuję za kod powyżej). ALE miniaturki nie działają. Zamiast miniaturki zdjęcia pokazuje mi się biały paseczek, który jest linkiem do dużego zdjęcia wyświetlającego się w Lightbox. Wiele bym dała, żeby Pana tutorial był bardziej łopatologiczny.

  2. theavi napisał(a):

    Mam ten sam problem co poprzedniczka , nie generują się miniatury – może jakaś podpowiedź [ /index.php ze skryptem , /timthumb.php, /zdjecie.jpg, /zdjecie2.jpg, /cache, /js ].

Odpowiedz

 

Arkadiusz Tobiasz student Akademii Ekonomicznej im. Karola Adamieckiego w Katowicach na specjalnościach informatyka ekonomiczna oraz rachunkowość. Więcej...

jQuery Validation i funkcja remote

Jakiś czas temu zwrócił się do mnie użytkownik z problemem. Chodzi o to, że korzysta on z pluginu walidacji jQuery, […]

Zend Framework: integracja z Uploadify

W tym wpisie postaram się przedstawić Wam w jaki sposób zintegrować skrypt Uploadify z Zend Frameworkiem. Dzięki temu będziemy mogli […]

Javascript: Czasowe wyświetlanie reklamy

Czasami chcemy, aby na pewnym elemencie naszej strony wyświetlała się reklama przez jakiś czas, a następnie zniknęła. W tym wpisie […]

Linux: backup wszystkich baz danych MySQL

Swego czasu pisałem o tym jak z poziomu konsoli można szybko i przyjemnie zrobić backup bazy MySQL. Wszystko jest ładnie […]