MLBox
Prosty skrypt wyświetlający zdjęcia oraz dokumenty na warstwie. Podobnych skryptów jest cała masa: lightbox, lytebox. Nic wielkiego i odkrywczego, jednak ma swoje zalety:
- żadnego pliku CSS
- cały skrypt to 7 10 kilobajtów
- wykorzystuje XHR (tzw. AJAX) do wczytywania doskumentów PHP/HTML
- zadziała z poprawnym XHTML (application/xhtml+xml)
- nie powinien popadać w konflikt z innmi skryptami, przede wszystkim z frameworkami typu jquery
- żadnej wkurzającej animacji - obrazek dostajemy zaraz po kliknięciu na link.
Jak na tak niewielką funkcję jaką spełniają skrypty powiększające zdjęcia, nie wydaje mi się aby była potrzeba ładowania dziesiątków kilobajtów kodu. Tak więc jeśli posiadasz prostą, czytelną stronę i potrzebujesz prostego i skutecznego skryptu do powiększania zdjeć, to MLBox jest dla Ciebie :)
Oczywiście skrypt wspiera "tryb galerii" tak jak jego "starsi bracia".
Instalacja skryptu
- Pobierz skrypt stąd, a następnie rozpakuj
- W nagłówku strony, w sekcji <head> dodaj:
<script type="text/javascript" src="mlbox.js"></script> - Obrazki które mają mieć możliwość powiększenia powinny mieć następujący kod:
<a href="image_max.jpg" title="Można dodać jakiś opis" class="mlbox"> <img alt="" src="image_min.jpg"> </a>Gdzie atrybuty:- href - powinien wskazywać na obraz który ma zostać wyświetlony po kliknięciu
- rel="mlbox" class="mlbox" - wskazuje że ten link/obrazek ma zostać powiększony
- title - opis który pokaże się pod powiększonym zdjęciem, oczywiście nie jest to atrybut obowiązkowy
I to właściwie wszystko.
Można stosować także składnię: <a rel="mlbox[nazwa]"...>
<a class="mlbox[nazwa]"...>. Jeżeli jest więcej zdjęć mających ten sam atrybut nazwa zostaną one potraktowane jako galeria -
można je sobie przewijać już powiększone, bez potrzeby powrotu do strony i klikania w kolejną miniaturę.
Jak to wygląda?
Licencja, gwarancja, wsparcie
Wszystkie te kwestie wyjaśnia strona o skryptach.