Colorbox mit langen Bildlegenden
Hallo,
ich habe eine Lösung gebraucht, ganz unterschiedlich lange Bildlegenden (auch sehr lange für Gruppenbilder) so in die Colorbox zu integrieren, dass man auch die Fotos noch sehen kann. Ein Versuch, die Legenden (Captions/cboxTitle) unten zu platzieren und bei Hovern auszublenden, war leider suboptimal, da der Titel beim Überfahren mit der Maus geflackert hat. Jetzt habe ich aber folgende Lösung (dank dieser Vorschläge) gefunden:
j_colorbox.html5 wie folgt ergänzen:
Code:
<?php
// Add the colorbox style sheet
// angepasste Kopie des Stylesheets eingebunden - die Lösung ist leider noch nicht ganz updatesicher
$GLOBALS['TL_CSS'][] = 'assets/jquery/colorbox/'. $GLOBALS['TL_ASSETS']['COLORBOX'] .'/css/colorbox_custom.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%'
});
});
$('a[data-lightbox]').colorbox({onComplete:function(){
$("#cboxTitle").hide();
$("#cboxLoadedContent").append($("#cboxTitle").html());
$.fn.colorbox.resize();
}});
});
})(jQuery);
</script>
Damit wird die Bildlegende (#cboxTitle) - egal wie groß - innerhalb von #cboxLoadedContent direkt unters Bild gesetzt und fließt in die Höhenberechnung mit ein, die noch mal vorgenommen wird. Den Rest kann man bei Bedarf via CSS stylen; ich habe z.B. xcboxLoadedContent erweitert:
Code:
#cboxLoadedContent{border:5px solid #000;background:#000;font-family:Arial,sans-serif;font-size:0.8rem;line-height:1.3;color:#ccc;}
Vielleicht weiß ja jemand noch eine Möglichkeit, den Code im j_colorbox-Template zu optimieren.
VG
Anke
