Colorbox mit langen Bildlegenden

[Anke]

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:

<?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:

#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

[Leolux]

Toll. besten Dank für Deine Konstruktion.

[harley-rider]

Danke für diese Anpassung, funktoniert soweit, hat aber bei mir den unangenehmen Nebeneffekt, dass kein Resizing des Bildes mehr geschieht wenn z.B. das Browserfenster verkleinert wird.
Ist das bei Dir auch so ?

[Anke]

Im normalen Gebrauch funzt das Resizing bei mir, allerdings ist eine Mindestbreite des Layouts definiert. Zieh ich das Fenster schmaler, zentriert sich die Lightbox neu. Unterschreite ich mit dem Browserfenster die Mindestlayoutbreite, wird die Lightbox abgeschnitten. Mir genügt das Verhalten; normale User dürften kaum mit der Fensterbreite rumspielen.