Colorbox - Opacity ändern
Aus Contao Community Documentation
Version vom 28. Februar 2016, 00:27 Uhr von Mlweb (Diskussion | Beiträge)
| betrifft | |
|---|---|
| Contao Version | 3.5.6 |
Inhaltsverzeichnis
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'][] = 'assets/jquery/colorbox/'. $GLOBALS['TL_ASSETS']['COLORBOX'] .'/css/colorbox.min.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); }
