--=REKLAMA=--

Slimbox na swoją stronę Joomla!

Z Joomla!WikiPL

W tym samouczku pokażę jak zainstalować i używać Slimbox na swojej stronie internetowej opartej na Joomla!. Zakładam, że masz już zainstalowanego Joomla!, oraz że masz dostęp do panelu administracyjnego.

Przygotowania

1. Pobierz plik slimbox-1.57.zip ze strony: http://slimbox.googlecode.com/files/slimbox-1.57.zip.
2. Rozpakuj plik na dysk komputera.
3. Z rozpakowanego już katalogu skopiuj foldery na serwer:
  • „js” - bezpośrednio do katalogu twojego szablonu,
  • całą zawartość katalogu „css” do katalogu „css” twojego szablonu.
4. Zaloguj się do panelu administracyjnego Joomla!.
5. Kliknij kolejno: Rozszerzenia >> Szablony .

15 slimbox rozszerzenia szablony.png

6. Zaznacz szablon używany jako domyślny i w przyborniku kliknij „Zmień”.

15 slimbox szablon zmien.png

Edycja szablonu

Możemy przejść do edycji twojego szablonu. W tym celu w przyborniku należy kliknąć Edytuj HTML. W tym opisie założymy, że domyślnym szablonem Twojej witryny jest rhuk_milkyway. Zwróć szczególną uwagę na to, czy plik params.ini Twojej templatki jest zapisywalny!

15 slimbox szablon edytuj.png


Do Twojego szablonu musimy teraz dodać odpowiedni fragment kodu: dwie linie kodu, które widoczne są poniżej należy skopiować do kodu szablonu (obie linie muszą się znaleźć w sekcji <head>).

Oczywiście, należy uwzględnić szablon, jakiego używasz, i odpowiednio zmodyfikować wpis.

 <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/rhuk_milkyway/js/slimbox.js"></script>
 <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/rhuk_milkyway/css/slimbox.css" type="text/css" />

15 slimbox edytuj html.png

Po dodaniu kodu należy zapisać zmiany.

15 slimbox szablon html.png

Jak używać

Zobaczmy na przykładzie, jak używać „slimbox” dla zdjęć w artykułach. Tworzymy nowy artykuł - Artykuły → Wszystkie Artykuły i z przybornika wybieramy Utwórz.

Ikona informacja.png
 Informacja

 Jeśli używasz edytora WYSIWYG, to na czas edycji należy go wyłączyć lub skorzystać z opcji Wstaw HTML.

15 slimbox wylacz html.png

Do przykładu wykorzystamy zdjęcie, które znajduje się już na serwerze w: images/stories/fruit/cherry.jpg.

Oczywiście, folder ze zdjęciami, które będziesz chciał wykorzystać, może być dowolny – należy jednak pamiętać o dokładnym podaniu ścieżki do pliku. Umieśćmy zatem jedno zdjęcie w przygotowywanym artykule - aby wykorzystać efekt „slimbox”, należy wstawić odpowiedni parametr rel="lightbox" - zobacz, jak wygląda to na przykładzie poniżej;

Przykład:

 <a href="images/stories/fruit/cherry.jpg" rel="lightbox" title="Cherries"> <img src="images/stories/fruit/cherry.jpg" border="0" title="Cherries" /></a>

Pamiętaj, aby zawsze po wprowadzeniu zmian, wszystko zapisać. Klikamy Zapisz i mamy gotowy efekt „slimbox” na swojej stronie.

15 slimbox gotowy efekt.png


Źródło: Scribd

Dziękujemy za wkład

» Stefan Wajda [zwiastun],