Colorbox - Opacity ändern: Unterschied zwischen den Versionen

Aus Contao Community Documentation

(Variante 2 - Veränderung der Eigenschaft opacity in der Colorbox)
(Lösung für j_colorbox (jQuery))
 
(Eine dazwischenliegende Version von einem Benutzer wird nicht angezeigt)
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.
  
 
<source lang=j>
 
<source lang=j>
Zeile 60: Zeile 61:
  
 
// Add the colorbox style sheet
 
// Add the colorbox style sheet
$GLOBALS['TL_CSS'][] = 'assets/jquery/colorbox/'. $GLOBALS['TL_ASSETS']['COLORBOX'] .'/css/colorbox.min.css|static';
+
$GLOBALS['TL_CSS'][] = 'files/pfad_zur_updatesicher_gespeicherten_css_datei/colorbox.css|static';
  
 
?>
 
?>

Aktuelle Version vom 28. Februar 2016, 00:38 Uhr

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

Nur weil es bei Nachbarseite XYZ was gibt, wird automatisch oft davon ausgegangen, dass das fertige Bauteil einsatzbereit auf der Straße liegt.

Marie Dietz
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge