Colorbox - Opacity ändern: Unterschied zwischen den Versionen
Aus Contao Community Documentation
Mlweb (Diskussion | Beiträge) (Eigenschaft opacity in j_colorbox verändern) |
Mlweb (Diskussion | Beiträge) |
||
| Zeile 1: | Zeile 1: | ||
| − | + | {{AppliesTo | |
| + | |Version=3.5.6}} | ||
| + | [[Category:Admin HOWTOS]] | ||
| + | [[Category:Anwender und Redakteure]] | ||
| + | [[Category:Dev Snippets]] | ||
== Lösung für j_colorbox (jQuery) == | == Lösung für j_colorbox (jQuery) == | ||
Version vom 28. Februar 2016, 02:19 Uhr
| 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'][] = '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: 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); }
