--=REKLAMA=--
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.
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!
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" />
Po dodaniu kodu należy zapisać zmiany.
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.
Jeśli używasz edytora WYSIWYG, to na czas edycji należy go wyłączyć lub skorzystać z opcji Wstaw HTML.
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.
Źródło: Scribd