Inzwischen haben wir Agenturintern eine Lösung entwickelt, die ich euch nicht vorenthalten möchte. Damit ist es allgemein möglich, bei einer mehrseitigen Galerie (die als Content Element eingebunden ist) per AJAX die einzelnen Seiten zu durchblättern und somit auf ein Neuladen der Seite zu verzichten. Somit gibt es kein Problem mit Tabcontrol und beides funktioniert harmonisch miteinander.
Wie das dann aussehen kann, seht ihr hier:
http://www.ingegraessle.eu/besuche
(weiter unten auf der Seite gibt es ein Tabcontrol-Element "Brüssel"/"Straßburg"/"Luxemburg", in welchem Galerien liegen)
HowTo
- Zuerst muss sichergestellt sein, daß Script-Tags nicht von Contao herausgefiltert werden. Im Backend gibt es im Bereich "Einstellungen" dafür den Punkt "erlaubte Tags", wo die Ausnahme hinzugefügt werden kann.
- danach muss die ID der Galerie in Erfahrung gebracht werden. Bewegt dazu in der Listendarstellung aller Content-Elemente den Mauszeiger über den "Bearbeiten"-Stift des Galerie-Content-Elements und lest im erscheinenden gelben Tooltip die ID ab.
- Nun muss unter der Galerie muss ein neues Inhaltselement vom Typ "HTML" erstellt werden. In dieses Element wird der folgende Code hineinkopiert und die ID ersetzt.
HTML-Code:
<script>
function gallery_reload(){
document.getElements('.pagination a').addEvent('click', function(event){
event.preventDefault();
if (event.target.get('href').match('page=[0-9]') != null){
var page = event.target.get('href').match('page=[0-9]');
var url = 'g=1&action=cte&id=***&'+page; //ID des Inhaltselementes
}else{
var page = 'page=1';
var url = 'g=1&action=cte&id=***&page=0'; //ID des Inhaltselementes
}
new Request.JSON({
method:'get',
data:url,
url:'ajax.php',
update: event.target.getParent('.ce_gallery'),
onSuccess: function(responseText) { event.target.getParent('.ce_gallery').set('html', responseText.content); Slimbox.scanPage(); gallery_reload();},
}).send();
return false;
});
};
window.addEvent('domready', function(){
gallery_reload();
});
</script>
- solltet Ihr auf der Seite nicht die Contao-eigene Slimbox verwenden, sondern ein anderes Lightbox-Script, so muss der Funktionsaufruf "Slimbox.scanPage();" gelöscht werden. Stattdessen muss eine entsprechende Anweisung eurer eigenen Lightbox-Lösung eingefügt werden, welche die Seite nach Bildern scannt und den Lightbox-Effekt drüberlegt.
Na dann, viel Spaß beim nachbauen! Natürlich kann das noch weiterentwickelt werden (z.B. als Extension, welche eine Checkbox "[x] per AJAX weiterblättern" zum Galerie-Content-Element hinzufügt und das Javascript dann automatisch einbindet), aber die Grundfunktionialität ist gegeben und die Verwendung von Tabcontrol+Galerie keine Hürde mehr.
Lesezeichen