--=REKLAMA=--
SqueezeBox jest rodzajem Lightbox. Jest to aplikacja JavaScript przeznaczona do wyświetlania treści za pomocą przejrzystego pola w elegancki i prosty sposób. Za pomocą SqueezeBox możemy wyświetlać różnorodne materiały, najczęściej wykorzystywany jest jednak do wyświetlania obrazów. Musimy jednak pamiętać, że SqueezeBox ma pewne ograniczenia, takie jak fakt, że w tym samym czasie nie możemy wyświetlać wiele treści. Obecnie SqueezeBox nie może być wykorzystany do wyświetlania galerii obrazów. Mimo że konfiguracja może wydawać się nieco skomplikowana, ten przewodnik zawiera wszystko co należy zrobić, aby dodać SqueezeBox do Joomla!.
W celu uzyskania pożądanych wyników, musisz znać podstawowe zagadnienia z zakresu HTML i umiejętnie posługiwać się Joomla! w wersji 1.5. Zawartość tego przewodnika jest oparta na domyślnych ustawieniach Joomla!.
Najprostszym sposobem, aby ustawić SqueezeBox to edycja szablonu z poziomu Joomla!. Opiszemy dokładnie jak to zrobić. W tym przewodniku wykorzystamy standardowy szablon Joomla! jakim jest „rhuk_milkyway”
Możemy przejść do edycji Twojego szablonu. W tym celu w przyborniku należy kliknąć Edytuj HTML. Zwróć szczególną uwagę na to, czy edytowany przez Ciebie plik jest zapisywalny!
Do Twojego szablonu musimy teraz dodać odpowiedni fragment kodu. Musisz odszukać w kodzie szablonu taki wpis:
<jdoc:include type="head" />
i zaraz za nim umieścić następujący fragment kodu:
<script type="text/javascript" src="<?php echo $this->baseurl ?>/media/system/js/modal.js"> </script> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/media/system/css/modal.css" type="text/css" /> <script type="text/javascript"> // <!-- window.addEvent('domready', function(){ var JTooltips = new Tips($$('.hasTip'), { maxTitleChars: 50, fixed: 'false'}); }); // --> </script> <script type="text/javascript"> // <!-- window.addEvent('domready', function() { SqueezeBox.initialize({}); $$('a.modal').each(function(el) { el.addEvent('click', function(e) { new Event(e).stop(); SqueezeBox.fromElement(el); }); }); }); // --> </script>
Po dodaniu kodu należy zapisać zmiany.
na obrazku poniżej przedstawiono gdzie dokładnie należy wkleić kod:
Alternatywną metodą implementacji i zdecydowanie prostszą jest dodanie w pliku szablonu (np. /templates/mojszablon/index.php) funkcji JHTML::_('behavior.modal') gdzieś w pliku np:
<?php defined('_JEXEC') or die ('Direct Access Denied'); JHTML::_('behavior.modal'); ?>
Funkcja ta sama doda skrypty wymagane do działania SqueezeBox.
Na potrzeby naszego poradnika utworzymy nowy artykuł i dodamy do niego obrazek wykorzystując SqueezeBox.
Jeśli używasz edytora wizualnego (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 „SqueezeBox”, należy wstawić odpowiedni kod - zobacz, jak wygląda to na przykładzie poniżej;
Wzór:
<a rel="SqueezeBox" href="location" title="caption" class="modal"> <img src="location" alt="description" title="caption" /></a>
W naszym przypadku, w którym wykorzystamy zdjęcie cherry.jpg kod wyglądać będzie następująco: Przykład:
<a rel="SqueezeBox" href="images/stories/fruit/cherry.jpg" title="Cherry" class="modal"> <img src="images/stories/fruit/cherry.jpg" border="0" alt="cherry" title="Cherry" /></a>
Ciekawostką jest to, że możemy wykorzystać efekt SqueezeBox do zamieszczenia (osadzenia) w naszej witrynie Joomla! jakiegoś zewnętrznego serwisu. Dodajmy do naszego artykułu link, który po jego kliknięciu otworzy nam wewnątrz naszej witryny stronę google.pl:
Wzór:
<a rel="{handler: 'iframe', size: {x: width, y: height}}" href="address" class="modal">link name</a>
zatem dla naszych potrzeb, kod wyglądać będzie następująco:
Przykład:
<a rel="{handler: 'iframe', size: {x: 800, y: 600}}" href="http://google.pl" class="modal">link do google.pl</a>
Źródło: Scribd
» Malkowitch,