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?
Colorbox und Touchswipe (Wischen)
Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
Zitieren
. Das habe ich erst auf dem Desktop gemerkt, mobil dachte ich erst, die Steuerung durch Wischen geht nicht, weil das gleiche Bild nochmal angezeigt wurde. Einiges was tosrus kann, wie die Steuerung durch Wischen und die (sofortige) automatische Anpassung an Änderungen der Fenstergröße (z.B. beim Drehen des Smartphones) würde mir schon gefallen. Na, mal sehen, ob ich das alles so eingestellt bekomme wie ich mir das vorstelle.
Lesezeichen