Colorbox - Opacity ändern

Aus Contao Community Documentation

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

Das hier ist eine abstrakte Konversation

Marc A. Harnos
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge