Typo3 rgsmoothgallery mit Mootools 1.21 (t3mootools)

Ähnlich wie bei rgtabs wurde bei rgsmoothgallery von Georg Ringer eine Bibliothek benutzt, die nicht kompatibel mit der neuen Version der mootools ist. Das Skript verwendet die Version 1.2 von JonDesign's SmoothGallery.

Neue Gallery
Die neue Version 2.1beta1 enthält die nötigen Änderungen. In der neuen Version wurde die Funktion populateData aufgeteilt und stark verbessert. Außerdem werden die Bilder auch in einem perloader vorgeneriert. Allerdings kommt die Bibliothek immer noch nicht damit zurecht, wenn ein Eintrag leer ist. Dazu muss das Listing 1 eingefügt werden.

Listing 1:
if ((options.showInfopane) (options.showCarousel)) {
// ADDED: title or subtitle empty
if (!el.getElement(options.titleSelector))
var temptitle = "";
else
var temptitle = el.getElement(options.titleSelector).innerHTML;
if (!el.getElement(options.subtitleSelector))
var tempsubtitle = "";
else
var tempsubtitle = el.getElement(options.subtitleSelector).innerHTML;
elementDict.extend({
title: temptitle,
description: tempsubtitle
/* original
title: el.getElement(options.titleSelector).innerHTML,
description: el.getElement(options.subtitleSelector).innerHTML
*/
// PRONETWORK END
});
}


Lightbox aufrufen
Ebenso wurde in die Typo3-Version eine Lightbox integriert, die für die Großanzeige der Bilder benutzt wird. Sie ist an der Stelle "makeLink" eingebunden (Lisiting 2). Um komfortabel darauf zugreifen zu können, wird in den Optionen noch die Zeile "lightbox:false," hinzugefügt.

Lisiting 2:
makeLink: function(num) {
this.currentLink.setProperties({
href: this.galleryData[num].link,
title: this.galleryData[num].linkTitle
})
// added for Lightbox
if (options.lightbox) {
this.currentLink.onclick = function () {
Slimbox.open(this.galleryData, num, {});
return false;
}.bind(this);
}
// added for Lightbox END
if (!((this.options.embedLinks) && (!this.options.showArrows) && (!
this.options.showCarousel)))
this.currentLink.setStyle('display', 'block');
},


Leere Titel
Auch das Listing 3 beschäftigt sich mit dem Problem, leere Titel anzufangen. Wie schon in Lising 1 ist das im Skript nicht vorhanden. Dieses Listing fängt die leeren Titel in der Slideshow ab.

Listing 3:
showInfoSlideShow: function() {
this.fireEvent('onShowInfopane');
this.slideInfoZone.cancel();
element = this.slideInfoZone.element;
// mod ringerge.org
this.title = this.galleryData[this.currentIter].title;
this.description = this.galleryData[this.currentIter].description;
if (this.title!=' ' && this.title!='' ) {
// mod ringerge.org
element.getElement('h2').set('html', this.galleryData[this.currentIter].title);
element.getElement('p').set('html', this.galleryData[this.currentIter].description);
if(this.options.slideInfoZoneSlide)
this.slideInfoZone.start({'opacity': [0, this.options.slideInfoZoneOpacity], 'height': [0,
this.slideInfoZone.normalHeight]});
else
this.slideInfoZone.start({'opacity': [0, this.options.slideInfoZoneOpacity]});
// mod ringerge.org
}
// mod ringerge.org
if (this.options.showCarousel)
this.slideInfoZone.chain(this.centerCarouselOn.pass(this.currentIter, this));
return this.slideInfoZone;
},


Leere Container
Außerdem wurden einige Änderungen von Georg Ringer durchgeführt, bei hideCarousel wird eine Exception abgefangen, falls der Karussel Container leer ist (Listing 4).

Listing 4:
hideCarousel: function () {
if (this.carouselContainer) {
(...)
}
}


Neue, alte Funktionen
Listing 5 und 6 zeigt ein Beispiel aus dem alten Skript, das auch im neuen Skript eine gute Funktion durchführen könnte. Deshalb habe ich diese Änderungen wieder ins neue Skript übernommen. Angeschaltet wird diese Funktion über die Option "showPlay", die unter options hinzugefügt werden muss.

Listing 5:
startStop: function() {
if (this.options.timed) {
$clear(this.timer);
this.options.timed = false;
this.startStopEl.toggleClass('pause');
} else {
this.startStopEl.toggleClass('pause');
this.options.timed = true;
this.timer = this.nextItem(this);
}
},

Listing 6:
createCarousel: function() {
(...)
// from old script
if (this.options.showPlay) {
this.startStopEl = new Element('a').addClass('play').addEvent(
'click',
this.startStop.bind(this)
).injectInside(carouselContainerElement);
}
// from old script END
(...)
}


Altes Event
Ebenso ist ein Event "onHideCarousel" eingebunden, dass über die Option "carouselAutohide" gesteuert wird. Eine weitere Funktion dafür ist nicht vorhanden (Listing 7). Das Listing wird am Ende der "goTo" Funktion eingebunden.

Listing 7:
if (this.options.carouselAutohide) {
this.fireEvent('onHideCarousel');
}


2. Teil
Im zweiten Teil dieses Artikels werde ich die Änderungen im Lightbox-Skript beschreiben, die notwendig sind, um diese ebenfalls mit den neuen mootools zu benutzen.