Liste der Anhänge anzeigen (Anzahl: 1)
Swipe für Mediabox (Lightbox) nutzen
Es ist ja ein neues Feature in Contao 3.0 hinzugekommen das ich letztens schon gebraucht hätte, da sich der Kunde Beschwert hat, dass die Lightbox sich auf Mobilgeräten schlecht bedienen lässt. Die Funktion nennt sich swipe. Diese ist auf Mobilgeräten sehr belibt, da sich die Fotos durch Gesten weiter schieben lassen.
In diesem Tutorial beschreibe ich, wie ihr die mediabox (Lightbox) in Contao 2.11.x mit Swipe ausstattet.
Ich gehe davon aus, dass das auch in früheren Versionen gehen müsste. Einfach testen und hier reinschreiben
Ihr braucht mindestens die Mootols Version 1.4.5. Das Gesamtpaket findet ihr im Anhang. Contao 2.11.x hat die Mootools Version 1.4.5.
Was muss ich tun, um Swipe in der Mediabox möglich zumachen?
- Lade die Zipdatei im Anhang runter
- Prüfe deine Mootools Version ..plugins/mootools/1.4.5
- Kopiere die Datei "mootools-mobile.js" in den Ordner "tl_files"
- Erstelle ein Template "moo_mediabox.html5" oder "moo_mediabox.xhtml"
- Kopiere unten genannten Inhalt in das Template -> jeweils html5 oder xhtml
- Erstelle einen zusätzlichen Headtag um die Javascript Datei einzubinden (Kann in "fe_page" oder im Layout erfolgen)
Fertig :D
zu 5. xhtml
HTML-Code:
<?php
// Add the mediabox style sheet
$GLOBALS['TL_CSS'][] = 'plugins/mediabox/'. MEDIABOX .'/css/mediaboxAdvBlack21.css||static';
?>
<script src="<?php echo TL_PLUGINS_URL; ?>plugins/mediabox/<?php echo MEDIABOX; ?>/js/mediabox.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
(function($) {
window.addEvent('domready', function() {
var links = $$('a').filter(function(el) {
return el.rel && el.rel.test(/^lightbox/i);
});
$$(links).mediabox({
/* Put custom options here */
}, null, function(el) {
var rel0 = this.rel.replace(/[[]|]/gi,' ');
var relsize = rel0.split(' ');
return (this == el) || ((this.rel.length > 8) && el.rel.match(relsize[1]));
});
// Support swiping on mobile devices
$('mbImage').addEvent('swipe', function(e) {
(e.direction == 'left') ? $('mbNextLink').fireEvent('click') : $('mbPrevLink').fireEvent('click');
});
});
})(document.id);
/* ]]> */
</script>
zu 5. html5
HTML-Code:
<?php
// Add the mediabox style sheet
$GLOBALS['TL_CSS'][] = 'plugins/mediabox/'. MEDIABOX .'/css/mediaboxAdvBlack21.css||static';
?>
<script src="<?php echo TL_PLUGINS_URL; ?>plugins/mediabox/<?php echo MEDIABOX; ?>/js/mediabox.js"></script>
<script>
(function($) {
window.addEvent('domready', function() {
var links = $$('a').filter(function(el) {
return el.getAttribute('data-lightbox') != null;
});
$$(links).mediabox({
// Put custom options here
}, function(el) {
return [el.href, el.title, el.getAttribute('data-lightbox')];
}, function(el) {
var data = this.getAttribute('data-lightbox').split(' ');
return (this == el) || el.getAttribute('data-lightbox').match(data[0]);
});
// Support swiping on mobile devices
$('mbImage').addEvent('swipe', function(e) {
(e.direction == 'left') ? $('mbNextLink').fireEvent('click') : $('mbPrevLink').fireEvent('click');
});
});
})(document.id);
</script>
zu 6. Head Tag (evtl den Pfad anpassen)
HTML-Code:
<script src="tl_files/mootools/mootools-mobile.js"></script>
Für Erfahrenere Benutzer:
Es reicht eigentlich das "mootools-mobile.js" einzubinden und in dem template "moo_mediabox" folgende Zeilen hinzuzufügen:
HTML-Code:
// Support swiping on mobile devices
$('mbImage').addEvent('swipe', function(e) {
(e.direction == 'left') ? $('mbNextLink').fireEvent('click') : $('mbPrevLink').fireEvent('click');
});
