Colorbox - Opacity ändern: Unterschied zwischen den Versionen
Aus Contao Community Documentation
Mlweb (Diskussion | Beiträge) (→Lösung für j_colorbox (jQuery)) |
Mlweb (Diskussion | Beiträge) (→Lösung für j_colorbox (jQuery)) |
||
| Zeile 6: | Zeile 6: | ||
== Lösung für j_colorbox (jQuery) == | == Lösung für j_colorbox (jQuery) == | ||
| − | Um die opacity des Overlays der j_colorbox zu ändern gibt es mehrere Möglichkeiten | + | Um die opacity des Overlays der j_colorbox zu ändern gibt es mehrere Möglichkeiten. |
=== Variante 1 - !important im css === | === Variante 1 - !important im css === | ||
| Zeile 53: | Zeile 53: | ||
=== 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 gewünschte Wert für die opacity kann mit css '''ohne''' !important festgelegt werden. | Der gewünschte Wert für die opacity kann mit css '''ohne''' !important festgelegt werden. | ||
Aktuelle Version vom 28. Februar 2016, 02:38 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); }
