Colorbox - Opacity ändern: Unterschied zwischen den Versionen
Aus Contao Community Documentation
Mlweb (Diskussion | Beiträge) (→Variante 2 - Veränderung der Eigenschaft opacity in der Colorbox) |
Mlweb (Diskussion | Beiträge) (→Lösung für j_colorbox (jQuery)) |
||
| Zeile 54: | Zeile 54: | ||
=== Variante 3 - ohne !important im css === | === Variante 3 - ohne !important im css === | ||
Man setzt die Eigenschaft opacity im Template j_colorbox auf den Wert false. Template j_colorbox vorher kopieren | Man setzt die Eigenschaft opacity im Template j_colorbox auf den Wert false. Template j_colorbox vorher kopieren | ||
| − | Der | + | Der gewünschte Wert für die opacity kann mit css '''ohne''' !important festgelegt werden. |
<source lang=j> | <source lang=j> | ||
| Zeile 60: | Zeile 60: | ||
// Add the colorbox style sheet | // Add the colorbox style sheet | ||
| − | $GLOBALS['TL_CSS'][] = ' | + | $GLOBALS['TL_CSS'][] = 'files/pfad_zur_updatesicher_gespeicherten_css_datei/colorbox.css|static'; |
?> | ?> | ||
Version vom 28. Februar 2016, 02:29 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'][] = '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); }
