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

[Cranker]

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:

$.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!

[manoelo]

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

[Cranker]

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:

<script src="assets/swipe/2.0/js/swipe.min.js"></script>

Ich glaube das ist seit Contao 3 standardmäßig mit dabei...

Thorsten

[manoelo]

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

[Cranker]

Hast du einen Link zu der Website?

[manoelo]

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

[manoelo]

www.manoelo.de/FINELO

[manoelo]

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

[Cranker]

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

Nur mit swipe.js habe ich es leider nicht ans laufen bekommen.

[danielx11]

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

[Cranker]

Hallo Daniel,

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

[danielx11]

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

[Cranker]

Stimmt! Da ist was dran ;-)