Ergebnis 1 bis 3 von 3

Thema: Swipe für Mediabox (Lightbox) nutzen

  1. #1
    Contao-Fan Avatar von Zero
    Registriert seit
    25.05.2010.
    Ort
    Korntal
    Beiträge
    520
    User beschenken
    Wunschliste

    Beitrag 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?
    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
    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');
        });
    Angehängte Dateien Angehängte Dateien
    Geändert von Zero (06.08.2012 um 01:26 Uhr) Grund: Pfade korrigiert
    Mein Blog -> brothers-project.de

  2. #2
    Contao-Nutzer
    Registriert seit
    02.11.2012.
    Beiträge
    1

    Standard

    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

  3. #3
    Contao-Fan Avatar von jubel
    Registriert seit
    18.12.2011.
    Ort
    Waldbronn
    Beiträge
    715
    User beschenken
    Wunschliste

    Standard

    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.
    Geändert von jubel (02.11.2012 um 19:44 Uhr)
    Gruß

    -----------------------------------------------------------------------------------------------------------------
    „Ich versuche immer das zu tun, was ich nicht kann, damit ich hoffentlich lerne, wie es geht.“
    Pablo Picasso

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •