Getestet mit der Colorbox-Version in Contao 4.
Template: j_colorbox.html5
PHP-Code:
<?php
// Add the colorbox style sheet
$GLOBALS['TL_CSS'][] = 'assets/colorbox/css/colorbox.min.css|static';
?>
<style>
/* CSS in eigenes File auslagern */
#cboxLoadedContent { position: relative; }
.extra-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: #000;
color: #fff;
opacity: 0.8;
filter: alpha(opacity=80);
padding: 10px;
}
</style>
<script src="<?= $this->asset('js/colorbox.min.js', 'contao-components/colorbox') ?>"></script>
<!--Contao 3: script src="<?= TL_ASSETS_URL ?>assets/colorbox/js/colorbox.min.js"></script-->
<script>
jQuery(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();
$(document).bind('cbox_complete', function(){
var extra = $.colorbox.element().next('.caption').text();
$('#cboxLoadedContent').append('<div class="extra-info">'+extra+'</div>');
});
});
</script>
Lesezeichen