Colorbox für Mobile deaktivieren?

**comanche** · 08.08.2015, 15:52

Hallo,

ich verwende die Colorbox um Bilder/Galerien anzuzeigen. Jetzt zeig' ich für's Smartphone die Galerie-Thumbnails schon mit 100% Breite im Browser und möchte deshalb verhindern, dass sich die Colorbox (oder ein neues Fenster) für die Bilder öffnet. Wie kann ich das realisieren?

Danke und Gruß,
Andreas

**stefan-at-work** · 08.08.2015, 16:12

ein Lösungsweg wäre per Modul mobilecontent. Desktopversion mit Galerie und Großbildansicht, mobil mit Galerie ohne Großansicht.

**comanche** · 08.08.2015, 16:53

Danke für den Hinweis, Stefan!

Um die Pflege für Redakteure zu vereinfachen würde ich gerne auf zusätzliche Layouts und Contentelemente verzichten. Kann man per Script den Link der Elemente "a.cboxElement" entfernen/deaktivieren?

Grüße,
Andreas

**Spooky** · 09.08.2015, 08:35

Du könntest dir im j_colorbox Template eine entsprechende Abfrage einbauen.

**mandrake** · 09.08.2015, 09:23

Wobei die Abfrage im Template z.B. wie folgt aussehen könnte:

Code:

<script src="<?= TL_ASSETS_URL ?>assets/jquery/colorbox/<?= $GLOBALS['TL_ASSETS']['COLORBOX'] ?>/js/colorbox.min.js"></script><script>
  (function($) {
    $(document).ready(function() {


      var window_width = window.innerWidth;
      if (window_width >= 901) {


      $('a[data-lightbox]').map(function() {
        $(this).colorbox({
          // Put custom options here
          loop: false,
          rel: $(this).attr('data-lightbox'),
          maxWidth: '95%',
          maxHeight:'95%'
        });
      });


      } else {


      $('a[data-lightbox]').map(function() {
         $(this).removeAttr('data-lightbox').removeAttr('href');
        });
      }


    });
  })(jQuery);
</script>

**Spooky** · 09.08.2015, 09:32

Den href würde ich nicht removen.

**comanche** · 09.08.2015, 11:05

Zitat von mandrake

Wobei die Abfrage im Template z.B. wie folgt aussehen könnte:

Das funktioniert prima - vielen Dank!

@Spooky: wenn ich den href nicht entferne, dann wird ja das verlinkte Bild im Browserfenster angezeigt. Das soll vermieden werden. Oder siehst du eine andere Lösung?

Schonmal VIELEN DANK an alle!

Grüße,
Andreas

**Spooky** · 09.08.2015, 12:59

Wenn du den href entfernst hat der User gar keine Möglichkeit mehr am Smartphone das Original Bild zu öffnen.

**comanche** · 09.08.2015, 21:56

Zitat von Spooky

Wenn du den href entfernst hat der User gar keine Möglichkeit mehr am Smartphone das Original Bild zu öffnen.

Das ist ein Argument. Muss ich mal drüber nachdenken ...

Danke und Grüße,
Andreas

**rflx** · 22.02.2017, 13:13

Hallo zusammen
Um die Attribute und deren Werte nicht zu entfernen könnte man auch folgende Variante mit preventDefault() anwenden:

Code:

(function($) {
   $(document).ready(function() {
      if (window.innerWidth >= 768) {
         $('a[data-lightbox]').map(function() {
            $(this).colorbox({
               // Put custom options here
               loop: false,
               rel: $(this).attr('data-lightbox'),
               maxWidth: '95%',
               maxHeight: '95%'
            });
         });
      } else {
         $('a[data-lightbox]').map(function() {
            $(this).click(function(e) {
               e.preventDefault();	
            });
         });
      }
   });
})(jQuery);

Anstatt mit window.innerWidth könnte man jetzt aber auch mit den Contao eigenen Abhängigkeits-Klassen des Betriebssystems und des Browsers arbeiten die im <body>-Tag hinzugefügt werden:

Code:

(function($) {
   $(document).ready(function() {
      var $body = $('body');
      if (!$body.hasClass('mobile')) {
         $('a[data-lightbox]').map(function() {
            $(this).colorbox({
               // Put custom options here
               loop: false,
               rel: $(this).attr('data-lightbox'),
               maxWidth: '95%',
               maxHeight: '95%'
            });
         });
      } else {
         $('a[data-lightbox]').map(function() {
            $(this).click(function(e) {
               e.preventDefault();	
            });
         });
      }
   });
})(jQuery);

Mehr über die Abhängigkeits-Klassen des Betriebssystems und des Browsers findet ihr hier:
https://contao.org/de/news/vergesst-...ontao-210.html

Cheers,
rflx