Colorbox und Touchswipe (Wischen)
Mich stört bei der j_colorbox des cores, dass das Wischen auf Touchpads nicht implementiert ist.
Deshalb bin ich mal etwas auf die Suche gegangen.
Unter https://github.com/jackmoore/colorbox/issues/395
habe ich dann ein Skript gefunden, welches erfolgsversprechend ausieht. Es nutzt TouchSwipe.
Also habe ich mir die Erweiterung jquery_touchswipe installiert und im Seitenlayout aktiviert.
Das Template j_colorbox.html habe ich um den oben verlinkten Codeschnippsel erweitert
Code:
<?php
// Add the colorbox style sheet
$GLOBALS['TL_CSS'][] = 'files/jquery_themes/css/colorbox.css|static';
?>
<script src="<?= TL_ASSETS_URL ?>assets/jquery/colorbox/<?= $GLOBALS['TL_ASSETS']['COLORBOX'] ?>/js/colorbox.min.js"></script>
<script>
(function($) {
$(document).ready(function() {
$('a[data-lightbox]').map(function() {
$(this).colorbox({
// Put custom options here
loop: false,
rel: $(this).attr('data-lightbox'),
maxWidth: '95%',
maxHeight: '95%',
opacity: false,
current: "({current} von {total})",
});
});
});
})(jQuery);
jQuery(document).bind('cbox_open', function(){
jQuery("#colorbox").swipe( {
//Generic swipe handler for all directions
swipeLeft:function(event, direction, distance, duration, fingerCount) {
jQuery.colorbox.prev();
},
swipeRight:function(event, direction, distance, duration, fingerCount) {
jQuery.colorbox.next();
},
//Default is 75px, set to 0 for demo so any distance triggers swipe
threshold:0
});
});
</script>
Soweit ich das getestet habe funktioniert das auch. Trotzdem sieht es mir "unsauber" bzw. "inkonsistent" gecodet aus. Leider sind meine Javascript-Kentnisse eher rudimentär.
Wie kann man den Codeschnipsel sauberer ins Template einbauen?
