Lightbox mit Bildunterschrift (Caption)

Hallo,

ich bin auf der Suche nach einer Lightbox in welcher die Bildunterschrift mit ausgegeben wird. Das war, glaube ich, mal Standard über eine Meta.txt - seit ein paar Contao Versionen direkt über den Dateimanager. Die Colorbox bekomme ich irgendwie nicht dazu überredet die Bildunterschrift mit auszugeben, da kommt nur der Dateiname.

Gibt es da Ideen?

Grüße,
Christian

Wenn du eine Galerie nutzen willst, musst du einen Titel in der Dateiverwaltung hinterlegen und dann erhälst du ein eine Caption.
Wenn du nur ein Bild anzeigen willst, musst du bei Titel was hinterlegen.

Hallo 07alex07,

jepp, soweit so gut. Das habe ich gemacht, jedoch gibt die Lightbox nur den Dateinamen aus. Die im Dateimanager angegebene Bildunterschrift fehlt. In der Galerie habe ich die Bildunterschrift - in der lightbox nur den Dateinamen.

Grüße,
Christian

Hallo Christian,

in der Dateiverwaltung gibt es auch ein Feld für die Bildunterschrift, siehe Screenshot.

Ok,

Ich habe in der Dateiverwaltung nur in "Bildunterschrift" meine Beschreibung für das jeweilige Bild angegeben. Komischerweise gibt die Galerie das richtig aus, die lightbox kann anscheinend nur den Titel ausgeben. Das heißt man muss das zweimal eingeben - eigentlich ziemlich doof.

Nur Titel - Lightbox i.O., Galerie - keine Anzeige
Nur Bildunterschrift - Galerie i.O., Lightbox - keine Anzeige

Da ich im Template von der Lightbox nichts an der Ausgabe anpassen kann (ich finde da nichts) werde ich wohl oder übel das Template von der Galerie auf den Titel "umbiegen".

Ist so etwas ein Ticket wert?

du könntest per Javascript dir die Caption noch mit ausgeben lassen.

z.B:

Code:

---

...
maxHeight: '95%',
          onComplete: function() {
                  $("#cboxTitle").before('<div id="cboxCaption">' + $(this).next().text() + '</div>');
          },
          onClosed: function() {
                  $('#cboxCaption').remove();
          }
....

---

Hmm,

danke für den Tipp. Mit dem Schnipsel wird aber auch der Titel ausgegeben.

Grüße,
Christian

das kannst du ja auch ausblenden per CSS ;-)

Ups,

nee, ich meinte das in "cboxCaption" nicht die Bildunterschrift ausgegeben wird, sondern auch der Titel drin steht. "display: none;" kenne und liebe ich... ;)

du musst cboxCaption stylen

Jepp, ich glaube wir reden aneinander vorbei. Bei deinem Codeschnipsel ist der Inhalt von "cboxTitle" und "cboxCaption" identisch. Es wird also nicht die Bildunterschrift in "cboxCaption" ausgegeben, sonder da steht auch der Titel drin (zusätzlich zu der Ausgabe in "cboxTitle"). Keine Ahnung wie man an die Bildunterschrift mit Javascript kommt. In der colorbox.js finde ich nirgends "caption"...

naja nicht ganz.

der Code fügt vor das #cboxTitle ein neues Element <div id="cboxCaption">TEXT</div> mit dem Inhalt deiner Caption.
Du kannst dir auch eine andere Position aussuchen. Das war nur ein Beispiel ;-)

Liebe Community,
ich habe Schwierigkeiten mit der Bildunterschrift in der Colorbox. Mein Template sieht so aus:

PHP-Code:

---

<?php

// Add the colorbox style sheet
$GLOBALS['TL_CSS'][] = 'assets/colorbox/css/colorbox.min.css|static';

?>

<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%',
        title: false,
        current: false,
        fadeOut: 300,
        onComplete: function() {
          $("#cboxTitle").after('<div id="cboxCaption">' + $(this).next().text() + '</div>');
        },
        onClosed: function() {
          $('#cboxCaption').remove();
        }
      });
    });
  });
</script>

---

Das führt jedoch in der Lightbox-Gallery dazu, dass die Bildunterschrift mehrfach ausgegeben wird:
Anhang 21090
Anhang 21091

Bei jedem Klick auf "Weiter" wird eine neue Bildunterschrift generiert.

Hat jemand einen Tipp?

Herzlich
dudette

Hättest du ein Link zur Seite das man sich die Sache anschauen kann?

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>

---

Super, danke Dir!
Der letzte Post brachte die Lösung.

Hi,

ich suche auch nach einer Möglichkeit, die Bildunterschrift (figcaption) in der Lightbox anzeigen zu lassen.

Ist der PHP-Code von heyho auch für Contao 4.8.2 gültig?