Colorbox - Opacity ändern: Unterschied zwischen den Versionen

Aus Contao Community Documentation

(Eigenschaft opacity in j_colorbox verändern)
 
(Lösung für j_colorbox (jQuery))
 
(3 dazwischenliegende Versionen von einem Benutzer werden nicht angezeigt)
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) ==
  
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 24: Zeile 28:
  
 
// 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';
  
 
?>
 
?>
Zeile 49: 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 56: 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

... aber beim nächsten Mal nehm ich einfach den Catalog... da hab ich weniger Arbeit mit.

MacKP
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge