MODx: Slideshow2 mit der MODx Maxigallery füllen
Für einen Kunden habe ich folgende Chunks zusammengestellt um eine Slideshow2 von Aaron Glenman mit der Maxigallery 0.6 zu füllen. Das Beispiel enthält zusätzlich den Code für die Vergrößerung der Bilder in einer Multibox von phatfusion.
Achtung: Slideshow2 ist ein Script für das MooTools Framework, deshalb muss z.B. das jQuery Framework im noConflict Modus laufen – besser ist es natürlich, nur ein Javascript-Framework zu benutzen.
Im MODx Dokument wird folgender Aufruf angelegt. Der erste Maxigallery-Aufruf kümmert sich um die Bildverwaltung und gibt den Javascript-Aufruf für die Slideshow2 aus. Mit dem zweiten Maxigallery-Aufruf wird der HTML-Abschnitt ausgegeben in dem die Slideshow angezeigt wird.
[!AddHeaderfiles? &addcode=`Slideshow2head`!] [!MaxiGallery? &display=`normal` &lang=`de` &disable_js_libs=`1` &max_thumb_size=`xx` &max_pic_size=`yy` &max_big_size=`zz` &keep_bigimg=`1` &galleryOuterTpl=`Slideshow2JsOutTpl` &galleryPictureTpl=`Slideshow2JsPicTpl`!] <div id="bilder"><div id="show" class="slideshow"> [!MaxiGallery? &display=`normal` &lang=`de` &manageOuterTpl=` ` &disable_js_libs=`1` &galleryOuterTpl=`Slideshow2PictureOutTpl` &galleryPictureTpl=`Slideshow2PicturePicTpl` &limit=`1` &formprocessing=`0`!] </div></div>
Achtung: Bitte die Zahlen in den Snippet-Parametern für die Bildgrößen anpassen. Mit xx, yy und zz aus dem obigen Beispiel-Aufruf gibt es einen Fehler in Zeile 431(?) der maxigallery.class.inc.php .
Mit folgendem Chunk für AddHeaderfiles werden die notwendigen Javascripte eingebunden. Diese kann man sich auf den oben angegebenen Seiten herunterladen.
/assets/snippets/maxigallery/slideshow2/js/mootools.js;/assets/snippets/maxigallery/slideshow2/js/slideshow.js;/assets/snippets/maxigallery/slideshow2/css/slideshow.css;/assets/snippets/maxigallery/slideshow2/js/overlay.js;/assets/snippets/maxigallery/slideshow2/js/multibox.js;/assets/snippets/maxigallery/slideshow2/css/multibox.css
Zusätzlich werden nun noch einige Chunks für die beiden Maxigallery-Aufrufe angelegt.
'[+maxigallery.picture.filename+]': { caption: '[+maxigallery.picnumber+] von [+maxigallery.picscount+] [+maxigallery.picture.title+]', href: '[+maxigallery.path_to_gal+]big_[+maxigallery.picture.filename+]' }[+maxigallery.picnumber:ne=`[+maxigallery.picscount+]`:then=`,`+]
Achtung: Den [+maxigallery.picscount]] Platzhalter gibt es eigentlich nur im galleryOuterTpl. Damit er auch im galleryPictureTpl einsetzbar ist muss man die Maxigallery noch etwas patchen.
[+phx:if=`[+maxigallery.managebutton+]`:ne=``:then=`
<center>[+maxigallery.managebutton+]</center>`+]
<script type='text/javascript'>
window.addEvent('domready', function(){
var data = {
[+maxigallery.pictures+]
};
var myShow = new Slideshow('show', data, { captions: false, loader: false, linked: true, controller: true, height: 275, hu: 'assets/galleries/[*id*]', thumbnails: true, replace: [/^(.*)$/, 'tn_$1'], width: 400 });
var box = new multiBox('mb', {
showNumbers: false,
showControls: false,
overlay: new overlay(),
onClose: function(){ this.pause(false); }.bind(myShow),
onOpen: function(){ this.pause(true); }.bind(myShow)
});
});
</script>
<a class="mb" href="[+maxigallery.path_to_gal+][+maxigallery.picture.filename+]"><img class="slideshow-previewimage" src="[+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" width="[+maxigallery.picture_width_normal+]" height="[+maxigallery.picture_height_normal+]" alt="[+maxigallery.picture.title+]" /></a>
Achtung: Falls es Probleme mit der Klickbarkeit der Buttons beim Verwalten der Bilder gibt: .slideshow-images benötigt einen clear: left oder einen z-index, da .managecontainer einen float: left hat. Ansonsten liegt evtl. .slideshow-images vor .managecontainer mit den eben genannten Folgen.
Viel Erfolg beim Nachbauen.