Contao Konferenz 2019 in Duisburg - Call for Papers
Ergebnis 1 bis 9 von 9

Thema: Colorbox und Touchswipe (Wischen)

  1. #1
    Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    3.972
    Partner-ID
    7421

    Standard 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?
    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
    Immer dran denken: Contao-Check zum Testen der Servervoraussetzungen (Contao 2, Contao 3 und Contao 4) und zum Prüfen einer bestehenden Installation (bis Contao 3.5)

  2. #2
    Community-Moderator Avatar von stefan-at-work
    Registriert seit
    05.06.2009.
    Ort
    Bad Segeberg
    Beiträge
    1.585
    Partner-ID
    634

    Standard

    da gibt es schon etwas: tosrus

  3. #3
    Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    3.972
    Partner-ID
    7421

    Standard

    Danke. Schau ich mir mal an.
    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
    Immer dran denken: Contao-Check zum Testen der Servervoraussetzungen (Contao 2, Contao 3 und Contao 4) und zum Prüfen einer bestehenden Installation (bis Contao 3.5)

  4. #4
    Contao-Urgestein
    Registriert seit
    22.10.2013.
    Beiträge
    7.791
    User beschenken
    Wunschliste

    Standard

    Sieht interessant aus. Ist das kompatibel zu Contao 3.5?

  5. #5
    Community-Moderator Avatar von stefan-at-work
    Registriert seit
    05.06.2009.
    Ort
    Bad Segeberg
    Beiträge
    1.585
    Partner-ID
    634

    Standard

    läuft bei mir u.a. problemlos in einer 3.5.

  6. #6
    Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    3.972
    Partner-ID
    7421

    Standard

    @stefan-at-work
    Schönen Dank noch mal für den Tip. Habe jetzt augiebig getestet und gefällt mir bisher sehr gut. Werde ich wohl in Zukunft standardmäßig als jquery-Lightbox nutzen.
    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
    Immer dran denken: Contao-Check zum Testen der Servervoraussetzungen (Contao 2, Contao 3 und Contao 4) und zum Prüfen einer bestehenden Installation (bis Contao 3.5)

  7. #7
    Contao-Urgestein
    Registriert seit
    22.10.2013.
    Beiträge
    7.791
    User beschenken
    Wunschliste

    Standard

    Ich fange gerade mit dem Testen an, mit den Standardeinstellungen kommt meine Core-Galerie jedenfalls nicht hin. Ich habe da in die li's noch Download-Links eingebaut, die verlinkten Bilder scheint mir tosrus jetzt auch gleich noch anzuzeigen . 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.

  8. #8
    Contao-Nutzer Avatar von contao100
    Registriert seit
    12.11.2013.
    Ort
    Bocholt
    Beiträge
    85

    Standard

    Suche im Moment ebenfalls nach einer Lösung um die Colorbox auf einem Tablet-PC und Smartphone zu swipen.

    Bin dafür über dieses Plugin gestossen. Allerdings habe ich auf der GitHub-Seite des Plugins gesehen, dass das Plugin nicht mehr gewartet wird und durch andere Plugins ersetzt wurde.

    Zitat:

    "This plugin has been superseded by other plugins and is therefor no longer actively maintained."

    Quelle: https://github.com/FrDH/jQuery.TosRUs

    Um welches andere Plugin handelt es sich hierbei? Oder welchen Lösungsansatz habt ihr dabei verfolgt?

  9. #9
    Contao-Nutzer Avatar von ErichM
    Registriert seit
    14.11.2011.
    Beiträge
    32

    Standard

    Ich greife das Thema nochmals auf. Bei meinen Bildergalerien sollte (auf dem Smartphone) zwischen den einzelen Bildern mit einer Wischbewegung gewechselt werden können.
    Ich nutze einmal die Funktion der Contao-Galieren und außerdem eigene PHP-Scripts (<a href="files/galerie/bilder/m096_2012_ja_039.jpg" data-lightbox="gal" title=...).

    Im Ordner "assets/swipe" sind ja bereits Dateien für das Swipen vorhanden.
    Wie kann ich die Swipe-Funktion aktivieren?
    Im Internet und speziell hier im Forum habe ich nichts brauchbares dazu gefunden.

    Wer kann mir da weiterhelfen?
    Danke im Voraus.

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
  •