Ergebnis 1 bis 13 von 13

Thema: Lightbox4ward (fancybox) mit Swipe (Wischen zum weiterblättern) auf Touch-Geräten

  1. #1
    Contao-Nutzer Avatar von Cranker
    Registriert seit
    16.11.2009.
    Ort
    Taufkirchen
    Beiträge
    237
    Partner-ID
    6576

    Standard Lightbox4ward (fancybox) mit Swipe (Wischen zum weiterblättern) auf Touch-Geräten

    Da ich gerade die Bilder-Galerie (umgesetzt mit der "Lightbox4ward" Erweiterung) auf der Website für einen Kunden (www.hansiheckmair.com) um die Wisch-Funktionalität auf Touch-Geräten erweitert habe, dachte ich mir ich könnte das mal hier teilen für alle die das vielleicht auch machen möchten.

    Dafür muss lediglich das Template „j_lightbox4ward.html“ um folgenden Code erweitert werden:

    Code:
    $.extend($.fancybox.defaults, {
    
     // swipe for fancybox
     afterShow: function() {
         if ('ontouchstart' in document.documentElement){
             $('.fancybox-nav').css('display','none');
             $('.fancybox-wrap').swipe({
                 swipe : function(event, direction) {
                     if (direction === 'left' || direction === 'up') {
                         $.fancybox.prev( direction );
                     } else {
                         $.fancybox.next( direction );
                     }
                 }
             });
         }
     },
    Danke auch an Christoph Wiechert, den Autor der Erweiterung für seine Arbeit & Hilfe!
    V15* Thorsten Neuhaus
    Taufkirchen (München)


  2. #2
    Contao-Nutzer
    Registriert seit
    08.02.2013.
    Beiträge
    76

    Standard swipe lightbox4ward

    hallo
    hab versucht den code in der j_ligthbox4ward.html5 einzubauen, funktioniert leider nicht..

    wo genau muss ich den code in der j_ligthbox4ward.html5 einbauen...
    vielen Dank für kleinen tipp
    <?php
    // Add the colorbox style sheet
    $GLOBALS['TL_CSS'][] = 'system/modules/lightbox4ward/assets/fancybox/jquery.fancybox.css||static';
    $GLOBALS['TL_CSS'][] = 'system/modules/lightbox4ward/assets/fancybox/helpers/jquery.fancybox-count.css||static';
    if($GLOBALS['TL_CONFIG']['lightbox4ward_galleryNav'] == 'dots') $GLOBALS['TL_CSS'][] = 'system/modules/lightbox4ward/assets/fancybox/helpers/jquery.fancybox-dotNavi.css||static';
    if($GLOBALS['TL_CONFIG']['lightbox4ward_galleryNav'] == 'thumbs') $GLOBALS['TL_CSS'][] = 'system/modules/lightbox4ward/assets/fancybox/helpers/jquery.fancybox-thumbs.css||static';
    ?>
    <style>
    .fancybox-inner .inlineContent {
    background: #fff;
    padding: 15px;
    }
    </style>
    <script src="<?php echo TL_ASSETS_URL; ?>system/modules/lightbox4ward/assets/fancybox/jquery.fancybox.pack.js"></script>
    <script src="<?php echo TL_ASSETS_URL; ?>system/modules/lightbox4ward/assets/fancybox/helpers/jquery.fancybox-media.js"></script>
    <script src="<?php echo TL_ASSETS_URL; ?>system/modules/lightbox4ward/assets/fancybox/helpers/jquery.fancybox-count.js"></script>
    <?php if($GLOBALS['TL_CONFIG']['lightbox4ward_galleryNav'] == 'dots'): ?>
    <script src="<?php echo TL_ASSETS_URL; ?>system/modules/lightbox4ward/assets/fancybox/helpers/jquery.fancybox-dotNavi.js"></script>
    <?php endif; ?>
    <?php if ($GLOBALS['TL_CONFIG']['lightbox4ward_galleryNav'] == 'thumbs'): ?>
    <script src="<?php echo TL_ASSETS_URL; ?>system/modules/lightbox4ward/assets/fancybox/helpers/jquery.fancybox-thumbs.js"></script>
    <?php endif; ?>
    <script>

    (function($) {

    $.extend($.fancybox.defaults, {

    // hier habe ich den code eingebaut_________________________________________ ____________

    afterShow: function() {
    if ('ontouchstart' in document.documentElement){
    $('.fancybox-nav').css('display','none');
    $('.fancybox-wrap').swipe({
    swipe : function(event, direction) {
    if (direction === 'left' || direction === 'up') {
    $.fancybox.prev( direction );
    } else {
    $.fancybox.next( direction );
    }
    }
    });
    }
    },

    // __________________________________________________ __


    openEffect: '<?php echo $GLOBALS['TL_CONFIG']['lightbox4ward_openCloseEffect'] ?: 'elastic'; ?>',
    closeEffect: '<?php echo $GLOBALS['TL_CONFIG']['lightbox4ward_openCloseEffect'] ?: 'elastic'; ?>',
    openSpeed: <?php echo $GLOBALS['TL_CONFIG']['lightbox4ward_openCloseSpeed'] ?: '250'; ?>,
    closeSpeed: <?php echo $GLOBALS['TL_CONFIG']['lightbox4ward_openCloseSpeed'] ?: '250'; ?>,
    nextEffect: '<?php echo $GLOBALS['TL_CONFIG']['lightbox4ward_nextPrevEffect'] ?: 'elastic'; ?>',
    prevEffect: '<?php echo $GLOBALS['TL_CONFIG']['lightbox4ward_nextPrevEffect'] ?: 'elastic'; ?>',
    nextSpeed: <?php echo $GLOBALS['TL_CONFIG']['lightbox4ward_nextPrevSpeed'] ?: '250'; ?>,
    prevSpeed: <?php echo $GLOBALS['TL_CONFIG']['lightbox4ward_nextPrevSpeed'] ?: '250'; ?>,
    padding: 2,
    helpers: {
    <?php if ($GLOBALS['TL_CONFIG']['lightbox4ward_count']): ?>
    count: {}, // display the (x/y) counter
    <?php endif; ?>
    <?php if ($GLOBALS['TL_CONFIG']['lightbox4ward_galleryNav'] == 'dots'): ?>
    dotNavi: {}, // show dot navigation
    <?php endif; ?>
    <?php if ($GLOBALS['TL_CONFIG']['lightbox4ward_galleryNav'] == 'thumbs'): ?>
    thumbs: {
    width: 70,
    height: 70
    },
    <?php endif; ?>
    media: {},
    overlay : {
    closeClick : true,
    speedOut : 300,
    showEarly : true,
    css : {},
    locked : true
    },
    title : {
    type : "<?php echo $GLOBALS['TL_CONFIG']['lightbox4ward_title'] ?: 'float'; ?>" // 'float', 'inside', 'outside' or 'over'
    }
    }
    });

    $(document).ready(function() {
    $('a[data-lightbox]')
    .map(function(i, el) {
    $(el).attr('rel', $(el).attr('data-lightbox'));
    return el;
    })
    .fancybox();
    });

    })(jQuery);
    </script>
    manoelo

  3. #3
    Contao-Nutzer Avatar von Cranker
    Registriert seit
    16.11.2009.
    Ort
    Taufkirchen
    Beiträge
    237
    Partner-ID
    6576

    Standard

    Hallo,

    ja, das ist genau die richtige Stelle.
    Da habe ich es auch eingebaut.

    Wird bei dir auch "Swipe.js" geladen?
    Im Kopf der Seite müsste das eingebunden sein:

    Code:
    <script src="assets/swipe/2.0/js/swipe.min.js"></script>
    Ich glaube das ist seit Contao 3 standardmäßig mit dabei...

    Thorsten
    V15* Thorsten Neuhaus
    Taufkirchen (München)


  4. #4
    Contao-Nutzer
    Registriert seit
    08.02.2013.
    Beiträge
    76

    Standard swipe

    Hallo Thorsten
    <script src="assets/swipe/2.0/js/swipe.min.js"></script> ist eingebunden
    allerdings im body am ende

    villeicht hast du ja noch eine idee
    schöne grüsse
    manoelo

  5. #5
    Contao-Nutzer Avatar von Cranker
    Registriert seit
    16.11.2009.
    Ort
    Taufkirchen
    Beiträge
    237
    Partner-ID
    6576

    Standard

    Hast du einen Link zu der Website?
    V15* Thorsten Neuhaus
    Taufkirchen (München)


  6. #6
    Contao-Nutzer
    Registriert seit
    08.02.2013.
    Beiträge
    76

    Standard swipe

    Hallo Thorsten
    <script src="assets/swipe/2.0/js/swipe.min.js"></script> ist eingebunden
    allerdings im body am ende

    villeicht hast du ja noch eine idee
    schöne grüsse
    manoelo

  7. #7
    Contao-Nutzer
    Registriert seit
    08.02.2013.
    Beiträge
    76

  8. #8
    Contao-Nutzer
    Registriert seit
    08.02.2013.
    Beiträge
    76

    Standard swipe

    Hallo Thorsten
    ich glaube ich habe die lösung gefunden
    bei deiner seite ist im body noch

    <script type="text/javascript" src="files/jquery.touchSwipe.min.js"></script>
    eingebunden
    hab es mal bei mir eingebaut und es läuft soweit

    schGR manoelo

  9. #9
    Contao-Nutzer Avatar von Cranker
    Registriert seit
    16.11.2009.
    Ort
    Taufkirchen
    Beiträge
    237
    Partner-ID
    6576

    Standard

    Stimmt, mein Fehler!
    Das Script muss auch eingebunden werden.

    Nur mit swipe.js habe ich es leider nicht ans laufen bekommen.
    V15* Thorsten Neuhaus
    Taufkirchen (München)


  10. #10
    Contao-Nutzer
    Registriert seit
    03.01.2011.
    Beiträge
    97

    Standard

    Hi Cranker,

    vielen Dank für den guten Tipp. Hast du auch eine Idee für folgendes? Ich habe vor ein paar Tagen die lightbox4ward Version von Github geladen und manuell installiert. Soweit läuft auch alles ganz gut – bis auf die Mobile-Optimierung. Ich hatte in der alten Version den Vorteil, dass die Videos auf dem Smartphone in einem neuen Browsertab geöffnet wurden. Jetzt werden diese in er Lightbox geöffnet und leider auch nicht abgespielt (webm + mp4).

    Irgendeine Idee?

    Viele Grüße
    Daniel

  11. #11
    Contao-Nutzer Avatar von Cranker
    Registriert seit
    16.11.2009.
    Ort
    Taufkirchen
    Beiträge
    237
    Partner-ID
    6576

    Standard

    Hallo Daniel,

    Zitat Zitat von danielx11 Beitrag anzeigen
    Ich habe vor ein paar Tagen die lightbox4ward Version von Github geladen und manuell installiert. Soweit läuft auch alles ganz gut – bis auf die Mobile-Optimierung. Ich hatte in der alten Version den Vorteil, dass die Videos auf dem Smartphone in einem neuen Browsertab geöffnet wurden. Jetzt werden diese in er Lightbox geöffnet und leider auch nicht abgespielt (webm + mp4).
    Das die Videos in der Lightbox abgespielt werden ist ja wahrscheinlich grundsätzlich auch so gewollt – dafür ist die Erweiterung ja meines Wissens auch entwickelt worden, um mehr als nur Bilder anzuzeigen. Allerdings habe ich noch nie Videos vom eigenen Server eingebunden – immer nur von YouTube oder Vimeo. Wenn die nicht angezeigt wurden handelte es sich eigentlich immer um den falschen Link bzw. Aufruf des Videos.

    Wie das nun mit eigenen Videos ist kann ich dir leider nicht sagen.

    Grüße aus Taufkirchen
    Thorsten
    V15* Thorsten Neuhaus
    Taufkirchen (München)


  12. #12
    Contao-Nutzer
    Registriert seit
    03.01.2011.
    Beiträge
    97

    Standard

    Zitat Zitat von Cranker Beitrag anzeigen
    Hallo Daniel,

    Das die Videos in der Lightbox abgespielt werden ist ja wahrscheinlich grundsätzlich auch so gewollt – dafür ist die Erweiterung ja meines Wissens auch entwickelt worden ...
    Hallo Thorsten,

    vielen Dank für dein Feedback. Das ist richtig, nur auf dem Smartphone ist die Lightbox dann manchmal hinderlich und deshalb wurde in alten Versionen das Video statt in der Lightbox dann in einem neuen Tab geöffnet, was ich sehr clever fand.

    Viele Grüße
    Daniel

  13. #13
    Contao-Nutzer Avatar von Cranker
    Registriert seit
    16.11.2009.
    Ort
    Taufkirchen
    Beiträge
    237
    Partner-ID
    6576

    Standard

    Stimmt! Da ist was dran ;-)
    V15* Thorsten Neuhaus
    Taufkirchen (München)


Aktive Benutzer

Aktive Benutzer

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

Lesezeichen

Lesezeichen

Berechtigungen

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