Rozsławiony i tak chętnie używany na stronach Ligthbox jest z cała pewnością rozwiązaniem eleganckim i efektywnym, ma jednak pewien mankament – w modalnym oknie pozwala wyświetlać jedynie obrazy. Jeśli więc ktoś chciałby wyświetlić sobie w takim oknie fleszową animację albo w ogóle – inną stronę, to może zapomnieć o Lightboxie. Na szczęscie jest bardzo fajna alternatywa – Fancybox.

Zacznijmy od początku – Fancybox wykorzystuje bibliotekę jQuery i udostępniana na licencji MIT co oznacza mniej więcej tyle, że możemy z nim robić co nam się żywnie podoba. Strona projektu dostępna jest pod tym adresem. Generalnie fancybox obsługuje obrazy, strony HTML, pliki SWF oraz zapytania ajaxowe. Wygląd modalnego okna możemy łatwo edytować za pomocą kaskadowego arkusza stylów, a wbudowane opcje i metody dają pełną kontrolę nad funkcjonalnością i sposobem jego wyświetlania. Dodatkowo w paczce otrzymujemy dwie wtyczki – moushweel plugin oraz easing plugin. Pierwsza z nich, jak nietrudno się domyślić, zaprzęga do pracy myszkowego skrola, druga pozwala nieco uatrakcyjnić skrolowanie.

Instalacja

Instalacja Fancyboxa jest bajecznie prosta. Całość opisana jest bardzo dobrze tutaj. Po pierwsze należy upewnić się, że dokument HTML ma prawidłowo zadeklarowany DOCTYPE. Po drugie – podpiąć bibliotekę jQuery, korzystają np. z CDN:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

Po trzeciezassać odpowiednie skrypty i podpiąć je do dokumentu:

<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
<script type="text/javascript" src="/fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>

Aby móc korzystać z Fancyboxa wystarczy podpiąć ten pierwszy – dwa kolejne to wspomniane wcześniej pluginy. Po czwarte – konieczne będzie również podpięcie zewnętrznego arkusza stylów:

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />

I gotowe. Fancybox jest gotowy do użycia. Może ciut więcej roboty niż z Lightboxem, ale za chwilę się przekonacie, że warto.

Metoda Fancybox

Podpięcie wszystkiego jak należy pozwala na korzystanie z metody fancybox(), która to metoda będzie przyjmować różne argumenty, ale o tym za chwilę. Generalna zasada inicjowania fancyboxa jest prosta – w znaczniku <script>, tudzież w zewnętrznym pliku .js podpiętym do dokumenty, umieszczamy:

$(function(){
$(naszSelektor).fancybox()
})

W ramach przypomnienia – jeśli osadzamy kod bezpośrednio w pliku html, to robimy to na samym końcu, tuż przez zamknięciem znacznika <body>. Jeśli chodzi o selektor, to może on być dowolny – możemy odwołać się do klasy, do id, do href, to title, itp. Poniżej kilka przykładów dla takiego czegoś:

<a href="images/zdjecie.jpg" title="Przykładowe zdjecie" id="fb" class="fb">
     <img src="images/miniaturka.jpg" alt="Miniaturka zdjecia" />
</a>
$(function(){
     $('#fb').fancybox()
     // albo
     $('.fb').fancybox()
     // albo
     $('a[title="Przykładowe zdjęcie"]').fancybox()
     // albo
     $('a[href="images/zdjecie.jpg"]').fancybox()
})

Gotowe. Metoda fancybox() automatycznie przypisze zdarzenie click() do wskazanego selektorem elementu. Oczywiście można tę metodę przypisać dowolnemu elementowi na stronie – nie musi to być wcale <a>. Równie dobrze może to być <div>, <img /> albo dowolny inny element na stronie, kliknięcie którego ma wyświetlać coś w oknie modalnym.

CDN.

Podobne wpisy: