RSS

zapisz się: RSS Artykuły

szukaj

Slimbox 2 - program upiększający wyświetlanie grafik (oparty o Lightbox 2)

Komentarze 2

Fotografie - ramkiSlimbox 2 jest programem zewnętrznym, który sprawia, że zdjęcia, grafiki i przeróżne galerie wyświetlane są w elegancki i estetyczny sposób. Jest on oparty o popularny program tego typu - Lightbox 2. Jest jednak od niego znacznie lżejszy.

Wdrożenie Slimbox 2 w sNews nie przysparza żadnych problemów. Najpierw należy pobrać wszystkie niezbędne pliki. Paczkę ze Slimbox 2 można ściągnąć z następującej strony: Slimbox 2. Slimbox 2 wykorzystuje również jQuery, którą również należy pobrać ze strony z biblioteką jQuery. Teraz mamy już wszystkie niezbędne pliki. Przystępujemy do uruchomienia Slimboxa 2.

Najpierw wrzucamy na serwer zawartość folderu js (slimbox2.js)oraz folderu css - slimbox2.css oraz 4 grafiki (grafiki te muszą być w tym samym folderze co plik CSS). Oczywiście należy też umieścić na serwerze ściągnięty plik jQuery. Gdy mamy pliki na serwerze należy załączyć je do naszego CMSa. Czyli należy wyedytować plik index.php. Przed końcem znacznika </head> należy wpisać fragment:

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/slimbox2.js"></script>
<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />

Zaznaczone fragmenty to ścieżki do naszych plików. Odpowiednio pierwsza odpowiada za ścieżkę do biblioteki jQuery - cyfry pliku mogą być inne w zależności od aktualnej wersji tego pliku. Druga określa położenie pliku slimbox2.js na naszym serwerze, a trzecia stylów do Slimboxa 2.

Slimbox 2 do wyświetlania grafik wykorzystuje odnośniki, które prowadzą bezpośrednio do grafiki. Aby skrypt zadziałał należy w odnośniku zawrzeć atrybut "rel='lightbox'". Przykładowy link może wyglądać następująco:

<a href="grafika/zdjecie.jpg" rel="lightbox" title="Moje zdjęcie">Przykładowe zdjęcie</a>

Oczywiście w miejsce zaznaczonego fragmentu może być coś innego niż tekst - przykładowo miniaturka zdjęcia. Przykład zastosowania:

Zdjęcie lwa leżącego w trawie.

Jeśli jednak mamy więcej zdjęć i chcemy, żeby można było je przełączać między sobą to należy powiadomić o tym skrypt. Mając kilka zdjęć możemy je połączyć w następujący sposób:

<a href="zdjecia/zdjecie-1.jpg" rel="lightbox-nazwa">Zdjęcie 1</a>
<a href="zdjecia/zdjecie-2.jpg" rel="lightbox-nazwa">Zdjęcie 2</a>
<a href="zdjecia/zdjecie-3.jpg" rel="lightbox-nazwa">Zdjęcie 3</a>

Aby skrypt rozpoznał do jakiej galerii zaliczyć dane zdjęcie należy dodać do atrybutu "rel='lightbox'" myślnik oraz nazwę galerii. Wszystkie zdjęcia z taką samą nazwą będą połączone ze sobą. Przykład:

Zdjęcie słońca przebijającego się przez chmury  Zdjęcie płynącego strumyka zimą  Widok jeziora  Widok gór himalajskich

Na pewno zauważyłeś u siebie, że grafiki odpowiadające za przycisk "zamknij" oraz do zmiany zdjęcia są w języku angielskim. Aby to zmienić musisz stworzyć własne grafiki, wrzucić je na serwer oraz edytować plik slimbox2.css. W pliku tym są fragmenty odpowiadające za źródła grafik.

.lbLoading {
background: #fff url(loading.gif) no-repeat center;
}

#lbPrevLink:hover {
background: transparent url(prevlabel.gif) no-repeat 0 15%;
}

#lbNextLink:hover {
background: transparent url(nextlabel.gif) no-repeat 100% 15%;
}

#lbCloseLink {
display: block;
float: right;
width: 66px;
height: 22px;
background: transparent url(closelabel.gif) no-repeat center;
margin: 5px 0;
outline: none;
}

Musisz znaleźć powyższe fragmenty w pliku CSS i zmienić zaznaczone fragmenty. Pierwszy od góry określa ścieżkę docelową do grafiki ładowania zdjęcia - nie trzeba zmieniać właściwie tej grafiki, ale jeśli masz ładniejszą to możesz. Drugi i trzeci określa odpowiednio za grafikę "następne zdjęcie" oraz "poprzednie".

Ostatni najdłuższy fragment odpowiada za style przycisku zamknij. W nawiasie "url" wpisujesz położenie grafiki. W miejsce "width" i "height" wpisujesz rozmiary Twojej grafiki.

Po tych zabiegach mamy przetłumaczony interface Slimbox 2... prawie. Jeśli utworzyłeś galerię to na pewno zauważyłeś, że w lewym dolnym rogu jest pokazana liczba zdjęć w jeżyku angielskim (np. Image 1 of 10). Aby to zmienić wyedytuj plik slimbox2.js. Znajdź w nim fragment "Image {x} of {y}" i zmień przykładowo na "Zdjęcie {x} z {y}".

Po wszystkim powinieneś cieszyć się możliwościami Slimbox 2.

Podziel się

Bookmark and Share

  1. toolman
    toolman napisał(a):

    Witam.
    Coś ten slimbox tu nie działa. Ja używam Lightview w swojej instalacji sNews, wygląda to tak: http://kody.magazynek.org/game-icons/call-of-duty/

    p.s.
    Ładny skin strony :)

  2. Paweł Landzberg
    Paweł Landzberg napisał(a):

    Dzięki za zwrócenie uwagi. Właśnie stosunkowo niedawno nową skórkę przystosowywałem do sNews i zapomniałem dodać skrypty i style w nagłówku do Slimboxa. Już powinno działać jak należy ;)

Komentowanie zostało zablokowane