Wer die Colorbox als Lightbox verwendet, dem mag aufgefallen sein, dass die Skalierung der gross-geklickten Bilder sich nicht der Bildschirmgröße anpasst, sondern die unter den Contao-Einstellungen festgelegte Größe (Dateien und Bilder -> Maximale Frontend-Breite ) als Grundlage verwendet.
Man kann das Colorbox-Template (z.B. j_colorbox.html5) aber leicht kopieren und erweitern, damit sich Bilder, die größer sind als der Browser-Viewport, anpassen.
Hier ein Beispiel, das das Bild auf 95% der Breite und 90% der Höhe des Browser-Viewports skaliert:
Code:
<script>
(function($) {
$(document).ready(function() {
$('a[data-lightbox]').map(function() {
$(this).colorbox({
// Put custom options here
maxWidth:"95%",
maxHeight:"90%",
current:"Bild {current} von {total}",
loop:false,
rel:$(this).attr('data-lightbox')
});
});
});
})(jQuery);
</script>
Und hier noch eine (wenn auch vielleicht noch nicht perfekte) Möglichkeit, das Bild auch bei einem Browser-Resize neu zu skalieren:
Code:
$(function() {
var timeoutId;
$(window).on('resize', function() {
if (timeoutId) {
clearTimeout(timeoutId);
}
timeoutId = setTimeout(function() {
if ($('#colorbox:visible').length) {
$.colorbox.load();
}
}, 250);
});
});
Lesezeichen