Dienstag, 6. Oktober 2009

Typo3 rgsmoothgallery mit Mootools 1.21 (t3mootools) Teil 2

Lightbox
Die Lightbox in diesem Script ist die Slimbox von Christophe Beyls. Diese Box verfolgt den Ansatz ein möglichst kompaktes Script zu sein. In der Version 1.22 ist es noch nicht mootools 1.21 kompatibel, aber auch hier hat der Autor bereits einige Verbesserungen in das Script eingearbeitet und ist bei Version 1.7. Leider sind neuere Version nur noch als jquery Script zu erhalten, so dass keine Anpassungen an weitere mootools Generationen zu erwarten sind. Aber vielleicht werden doch beide Versionen weiter gepflegt.

Alles neu
Bei der Version 1.7 hat sich fast das komplette Script geändert, so dass hier nur die wichtigsten Änderungen beschrieben werden.
Die Box wird nun nicht mehr über den Funktionsaufruf erstellt, sondern wird direkt nach dem Aufruf der Seite (Event: domready) hinein geschrieben.
Die Möglichkeiten für das Speichern und Ausdrucken von Bildern wurden vom mir hinzugefügt (Listing 1). Für die Anzeige der Elemente wurde ein Save und Print Bild in den unteren Textbereich übernommen. Außerdem kommt die Beschreibungszeile aus typo3 für die Bildunterschrift hinzu (Listing 2). Zum Ein- und Ausblenden der Elemente "Speichern" und "Drucken" kommen noch die Einträge "showSave: true, showPrint: true," unter Options sowie vor der Initialisierung Listing 3 mit hinzu.

Listing 1:
function save() {
printOrSave("save");
}
function print() {
printOrSave("print");
}
function printOrSave(mode) {
options.psScriptPath = "typo3conf/ext/rgsmoothgallery/savefile.php";
if (options.psScriptPath) {
console.log(options.psScriptPath+'?mode='+mode+'&image='+activeURL);
var myRef = window.open(options.psScriptPath+'?mode='+mode+'&image='+activeURL,'printsave', 'left=0,top=0,width='+(parseInt(center.style.width))+',height='+ (parseInt(center.style.height)) +',toolbar=0,resizable=1');
}
return true;
}

Listing 2:
bottom = new Element("div", {id: "rglbBottom"}).injectInside(bottomContainer).adopt(
new Element("a", {id: "rglbCloseLink", href: "#", events: {click: close}}),

// save and print
save = new Element("a", {id: "rglbSaveLink", href: "#", events: {click: save}}),
print = new Element("a", {id: "rglbPrintLink", href: "#", events: {click: print}}),

number = new Element("div", {id: "rglbNumber"}),

// typo3
description = new Element("div", {id: "rglbDescription"}),

title = new Element("div", {id: "rglbTitle"}),
caption = new Element("div", {id: "rglbCaption"}),
new Element("div", {styles: {clear: "both"}})

Listing 3:
if (!options.showSave) save.setStyle("display", "none");
if (!options.showPrint) print.setStyle("display", "none");


Die Animation der Lightbox wurde umgeschrieben und die einzelnen Schritte zum Ablauf der Animation in Events aufgeteilt. Die Animation der Schrift wurde auf eine einzelne Funktion ausgelagert.

Code
Der komplette Code kann heruntergeladen werden.
rgsmoothtabs gallery
rgsmoothtabs lightbox

Keine Kommentare:

Kommentar veröffentlichen