mslonik.pl

Od dawna poszukiwałem galerii, która łączyłaby tak przeciwstawne wymagania, jak prostotę obsługi z efektownym wyglądem. Po wielu próbach mój wybór padł na wspaniały dodatek do J! 1.5 o nazwie 'slimbox' (wer. 1.0). Jak to jednak często bywa, czegoś mi brakowało. Tak pojawił się pomysł, by skorzystać po raz pierwszy z dobrodziejstwa licencji GPL, przerobić kod i tym samym dopasować go do swoich potrzeb. Efekt tych przemyśleń to slimbox po przeróbkach, w wersji 1.1, załączony do tekstu artykułu.

Zapraszam do lektury!

Załóżmy, że nasza galeria składa się z trzech obrazków, każdy w rozmiarze 640 pikseli:

1) obrazek1,

2) obrazek2,

3) obrazek3.

Dla tych trzech obrazków przygotowujemy miniatury, każdy w rozmiarze 200 pikseli:

1) miniatura1 (do obrazek1),

2) miniatura2 (do obrazek2),

3) miniatura3 (do obrazek3).

Dodatek 'slimbox' oryginalnie (w wersji 1.0) ma następującą składnię:

{slimbox /ścieżka/do/obrazka/w/pełnym/rozmiarze/obrazek1, /ścieżka/do/miniatury/miniatura1, opcjonalny komentarz 1; /ścieżka/do/obrazka/w/pełnym/rozmiarze/obrazek2, /ścieżka/do/miniatury/miniatura2, opcjonalny komentarz 2; /ścieżka/do/obrazka/w/pełnym/rozmiarze/obrazek3, /ścieżka/do/miniatury/miniatura3, opcjonalny komentarz}

Jeżeli w naszej galerii mamy więcej obrazków i postanowimy np. zamienić kolejność któryś z obrazków, to odnalezienie odpowiedniego ciągu nie jest zbyt łatwe.

W pierwszej kolejności zmiany 'slimbox' do wersji 1.1 objęły zmianę składni. W nowej wersji dozwolona jest następująca składnia:

{slimbox

/ścieżka/do/obrazka/w/pełnym/rozmiarze/obrazek1,

/ścieżka/do/miniatury/miniatura1,

opcjonalny komentarz 1;

/ścieżka/do/obrazka/w/pełnym/rozmiarze/obrazek2,

/ścieżka/do/miniatury/miniatura2,

opcjonalny komentarz 2;

/ścieżka/do/obrazka/w/pełnym/rozmiarze/obrazek3,

/ścieżka/do/miniatury/miniatura3,

opcjonalny komentarz 3

}

lub w wersji bez opcjonalnych komentarzy:

{slimbox

/ścieżka/do/obrazka/w/pełnym/rozmiarze/obrazek1,

/ścieżka/do/miniatury/miniatura1;

/ścieżka/do/obrazka/w/pełnym/rozmiarze/obrazek2,

/ścieżka/do/miniatury/miniatura2;

/ścieżka/do/obrazka/w/pełnym/rozmiarze/obrazek3,

/ścieżka/do/miniatury/miniatura3

}

Zwracam uwagę na brak średników w ostatnich linijkach!

Od teraz dozwolone jest umieszczanie ścieżek do plików w pełnym rozmiarze jak i plików miniatur w osobnych wierszach. Sekcje obejmujące kolejne obrazki mogą być od siebie oddzielone pustym wierszem. Działanie nowej składni zostało sprawdzone z edytorami:

a) JCE (wer. 1.5.1),

b) TinyMCE (wer. 2.0), dla ustawień wstawiajacych w miejscu znaków nowej linii znacznik P jak i BR.

W drugiej kolejności marzyła mi się zmiana stylu wyświetlania poszczególnych obrazków galerii. Chciałem, by nie przylegały jeden do drugiego, lecz by pomiędzy kolejnymi obrazkami galerii była pewna przerwa.

Nie potrafię programować w PHP czy zmieniać CSS (jeszcze nie!). O pomoc poprosiłem znajomych. Zmiany w kodzie 'slimbox.php' wykonał 'DD', któremu gorąco dziękuję za anielską cierpliwość i upór. Zmian w szablonie 'slimobx.css' dokonał sam Kali, któremu również gorąco dziękuję za pomoc. Efekty działania slimboxa w wersji 1.1 można zobaczyć np. na mojej stronie:

2006-08, Konkurs fotograficzny National Geographic

Kategoria "Zwierzęta":

{slimbox

images/stories/200608_KonkursFotograficzny_NationalGeographic/Zwierzeta/640_p6294033.jpg,

images/stories/200608_KonkursFotograficzny_NationalGeographic/Zwierzeta/200_640_p6294033_1.jpg;

images/stories/200608_KonkursFotograficzny_NationalGeographic/Zwierzeta/640_p6294038.jpg,

images/stories/200608_KonkursFotograficzny_NationalGeographic/Zwierzeta/200_640_p6294038_1.jpg;

images/stories/200608_KonkursFotograficzny_NationalGeographic/Zwierzeta/640_p6294044.jpg,

images/stories/200608_KonkursFotograficzny_NationalGeographic/Zwierzeta/200_640_p6294044_1.jpg;

images/stories/200608_KonkursFotograficzny_NationalGeographic/Zwierzeta/640_p7314573kadr.jpg,

images/stories/200608_KonkursFotograficzny_NationalGeographic/Zwierzeta/200_640_p7314573kadr_1.jpg

}

Slimbox w wersji 1.1 do pobrania tutaj.

AKTUALIZACJA 2009-12-27

Jeszcze kilka słów komentarza wyjaśniających czym slimbox jest, a czym nie jest.

Slimbox jest szybki. W internecie jest sporo galerii, które pozwalają zbudować galerię w oparciu o zdjęcia w dowolnej rozdzielczości. Przygotowanie takiej galerii ogranicza się do wyboru zdjęć. Nie ważne, jakiej są rozdzielczości. Wystarczy wskazać, gdzie się znajdują, jaki ma być rozmiar wyświetlanej na stronie miniatury, a jaki ma być rozmiar obrazku po powiększeniu miniatury.

Jeżeli ktoś odwiedzi witrynę z galerią tego typu, to stosowne skrypty galerii tworzą 'w locie' najpierw miniatury, a potem, jeżeli użytkownik kliknie na miniaturę, 'w locie' tworzą zdjęcie w domyślnej rozdzielczości, na jaką pozwala dany skrypt. To znaczy, że w chwili kliknięcia przez osobę odwiedzającą witrynę miniatura i obrazek w domyślnej rozdzielczości fizycznie nie istnieją, są tworzone specjalnie na potrzeby konkretnej wizyty, sesji. Efekt jest taki, że galerię tworzy się bardzo łatwo, natomiast za wyświetlanie obrazków odpowiadają skrypty galerii.

Przykład: załóżmy, że uwłaściciel strony zaplanował dla swojej galerii jedno zdjęcie o rozdzielczości 2194 x 1984 piksele, objętość 2.4 MB. Skrypty galerii na podstawie tego obrazka tworzą 'w locie' dwa inne:

• miniaturę o rozmiarze 200 x 200 pikseli, powiedzmy że 2.4 kB,
• obrazek o domyślnej rozdzielczości 'pełnej', powiedzmy 800 x 600 pikseli, powiedzmy 240 kB.

Gdy osoba odwiedzająca witrynę wejdzie na stronę z galerią, serwer musi 'w locie' dwa razy zmniejszyć obrazek zaplanowany do wyświetlenia do mostaci miniatury i obrazka o domyślnej rozdzielczości. Operacje zmniejszania rozmiaru obrazków bardzo obciążają procesor i nawet dzisiaj zajmują zauważalny czas. Szczególnie, gdy w naszej galerii umieścimy od razu setkę zdjęć. Pamiętajmy, że czas przeznaczony na zmniejszenie plików to tylko część problemu. Dodatkowo dochodzi jeszcze czas potrzebny na przesłanie plików wynikowych z serwera do przeglądarek osób odwiedzających witrynę.

Slimbox jest inny. Od razu trzeba zaplanować, w jakiej rozdzielczości będą miniatury, a w jakiej obrazki i od razu je wykonać w takich rozdzielczościach. Dzięki temu od razu wiemy, jak dużo miejsca zajmą te obrazki. Przy ich wyświetlaniu procesor nie musi już nic robić, nie musi zmniejszać rozmiarów plików. Dzięki temu slimbox jest szybki.

Wyobraźmy sobie teraz witrynę internetową z dużą liczbą wejść. Jeżeli na naszej witrynie mamy 30 galerii i aktualnie 30 użytkowników przegląda każdy inną galerię, to takie obciążenie będzie widoczne w postaci opóźnień ładowania plików. Dodam, że niepotrzebnych.

Dlatego warto pomyśleć o dodatku 'slimbox' jeżeli chcemy kontrolować jak obrazki mają być wyświetlane, jak mają wyglądać. Aż się prosi, by do tworzenia obrazków wykorzystać skrypty, które potrafią  je automatycznie zmniejszyć. Przygotowałem takie skrypty. Szczegóły tutaj.

Slimbox nie pozwala na dowolne umieszczenie obrazków miniatur. Po prostu stara się wpasować obrazki w dostępną przestrzeń. Sporo zależy od szablonu (plików CSS), które zarządzają danym fragmentem powierzchni strony. Może się zdarzyć, że w jednym wierszu zmieszczą się koło siebie 3 obrazki, a w kolejnym tylko 2. Warto zadbać o to, by w pojedynczej galerii były wyświetlane obrazki o orientacji poziomej, a w osobnej te o orientacji pionowej.

Umieszczenie galerii w artykule polega na umieszczeniu tekstu 'slimbox' oraz pary nawiasów klamrowych. Dzięki temu można bardzo szybko przygotować same galerie. Nie trzeba nic klikać, czekać na wyświetlenie się kolejnych okienek. Mamy pełną władzę nad kolejnością wyświetlania obrazków.