--=REKLAMA=--

Squeezebox na swoją stronę Joomla!

Z Joomla!WikiPL

Wersja Malkowitch (dyskusja | edycje) z dnia 19:44, 15 wrz 2009

(różn.) ← poprzednia wersja | przejdź do aktualnej wersji (różn.) | następna wersja → (różn.)

Co to jest SqueezeBox?

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!.

Pierwsze kroki do SqueezeBox

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”

Wykonaj kilka poniższych kroków:
  • zaloguj się do Panelu Administracyjnego Joomla!
  • wybierz kolejno: Rozszerzenia → Szblony

15 slimbox rozszerzenia szablony.png

  • zaznacz szablon używany jako domyślny (w naszym przypadku będzie to „rhuk_milkyway”) 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. Zwróć szczególną uwagę na to, czy edytowany przez Ciebie plik jest zapisywalny!

15 slimbox szablon edytuj.png


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.

15 slimbox szablon html.png


na obrazku poniżej przedstawiono gdzie dokładnie należy wkleić kod:

15 squeezebox html.png

Alternatywna metoda implementacji SqueezeBox

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.

Jak używać SqueezeBox

Na potrzeby naszego poradnika utworzymy nowy artykuł i dodamy do niego obrazek wykorzystując SqueezeBox.

Ikona informacja.png
 Informacja

 Jeśli używasz edytora wizualnego (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 „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>

Ciekawostki SqueezeBox

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>

Przykłady SqueezeBox

15 squeezebox przyklad1.png 15 squeezebox przyklad2.png



Źródło: Scribd

Dziękujemy za wkład

» Malkowitch,