Colorbox - Opacity ändern

Aus Contao Community Documentation

Version vom 28. Februar 2016, 00:38 Uhr von Mlweb (Diskussion | Beiträge)

(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)
betrifft
Contao Version 3.5.6

Lösung für j_colorbox (jQuery)

Um die opacity des Overlays der j_colorbox zu ändern gibt es mehrere Möglichkeiten.

Variante 1 - !important im css

Man überschreibt die Eigenschaft opacity im css mit !important.

#cboxOverlay {
  background:#000; 
  opacity: 0.5 !important; 
  filter: alpha(opacity = 50);
}

Variante 2 - Veränderung der Eigenschaft opacity in der Colorbox

Man setzt die Eigenschaft opacity im Template j_colorbox. Dazu eine Kopie des Templates anlegen und folgenden Code für z.B. opacity 80% nutzen:

<?php
 
// Add the colorbox style sheet
$GLOBALS['TL_CSS'][] = 'files/pfad_zur_updatesicher_gespeicherten_css_datei/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: 0.8
        });
      });
    });
  })(jQuery);
</script>

Variante 3 - ohne !important im css

Man setzt die Eigenschaft opacity im Template j_colorbox auf den Wert false. Template j_colorbox vorher kopieren.

Der gewünschte Wert für die opacity kann mit css ohne !important festgelegt werden.

<?php
 
// Add the colorbox style sheet
$GLOBALS['TL_CSS'][] = 'files/pfad_zur_updatesicher_gespeicherten_css_datei/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
        });
      });
    });
  })(jQuery);
</script>
#cboxOverlay {
  background:#000; 
  opacity: 0.6; 
  filter: alpha(opacity = 60);
}
Ansichten
Meine Werkzeuge

Contao Community Documentation

noch 4 mal das Wort Abstraktion und ich beginne Zigaretten zu rauchen...

Martin Mildner
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge