Lightbox mit Dojo und dem Zend Framework
12. Januar 2009Das Javascript Framework Dojo lässt sich mit dem Zend Framework besonders elegant einsetzen. Man kann die Integration von Dojo im der Controler Schicht, also in den Actions aktivieren und auch von dort angeben welche Module von Dojo man benötigt. So kann man sichergehen das die benötigten Javascript Dateien nur auf den Seiten geladen werden, wo sie auch genutzt werden.
Wenn ich also das Lightbox Modul verwenden möchte, füge ich nur folgenden Code in der Action Methode ein:
$this->view->dojo()->enable();
$this->view->dojo()->requireModule('dojox.image.Lightbox');
$this->view->headLink()->appendStylesheet('/js/dojox/image/resources/Lightbox.css');
Zusätzlich hat das Dojo Framework die praktische Eigenschaft, dass es sich alle zu dem Modul notwenigen Module selber nach per Ajax lädt.
Mit der Methode addOnLoad() kann ich eine Funktion definieren, die beim Laden der Seite aufgerufen wird. Dadurch kann man an verschiedenen Stellen eine Funktion zum Onload Ereignis hinzufügen ohne dass diese sich überschreiben.
$this->view->dojo()->addOnLoad('initLightbox');
In einer seperaten JavaScript Datei habe ich das Initialisieren der Lightbox definiert.
var initLightbox = function(){
dojo.query(".thumbs li a").forEach(function(node, index, arr){
var href = dojo.query('img',node)[0].src.replace('/thumbs/','/pics/');
var lb = new dojox.image.Lightbox({title:dojo.query('.tipp',node)[0].innerHTML, group:"group2", href:href ,style:'padding:40px;'});
lb.startup();
dojo.connect(node,'onclick',function(e){
e.preventDefault();
lb.show();
});
});
}
Dieser Code erzeugt aus einer einfachen Liste mit Links auf Bilder einer schönen Light Box mit Blätter Funktion.
<ul class="thumbs"> <li> <a id="68" href="/galery/picture/id/68"><img width="100" height="67" src="/images/galeries/1/thumbs/001.jpg" alt="56 x 42 cm" /></a> </li> ....
