Swipe für Mediabox (Lightbox) nutzen

[Zero]

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?

1. Lade die Zipdatei im Anhang runter
2. Prüfe deine Mootools Version ..plugins/mootools/1.4.5
3. Kopiere die Datei "mootools-mobile.js" in den Ordner "tl_files"
4. Erstelle ein Template "moo_mediabox.html5" oder "moo_mediabox.xhtml"
5. Kopiere unten genannten Inhalt in das Template -> jeweils html5 oder xhtml
6. Erstelle einen zusätzlichen Headtag um die Javascript Datei einzubinden (Kann in "fe_page" oder im Layout erfolgen)

Fertig

zu 5. xhtml

<?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

<?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)

<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:

// Support swiping on mobile devices
    $('mbImage').addEvent('swipe', function(e) {
      (e.direction == 'left') ? $('mbNextLink').fireEvent('click') : $('mbPrevLink').fireEvent('click');
    });

[andrea.margreiter]

Hey
Habs versucht auf contao 2.9.5 einzubauen,...
Leider hats nicht funktioniert und das accordion dann auch nicht mehr.
Schade, hoffe ich finde eine halbwegs bedienbare Lightbox.
Verwende zusätzlich <meta name="viewport" content="width=device-width, user-scalable=no">
Trotzdem danke!
LG

[jubel]

Lightbox4ward unterstützt auch Swipe.

Ups, ich meinte eigentlich pk_noobslide, aber bei Lightbox4ward reicht ja eh ein Klick/Tipp auf das Bild). Weiß auch nicht, warum ich die immer verwechsle.