Galerie übergibt Bilder nicht Data-Lightbox

Hallo!

Ich habe um ein Youtube Video in der Lightbox zu öffnen bereits die j_colorbox angepasst und auch versucht mit der moo_mediabox zu arbeiten, das Problem weswegen meine Lightbox aber nicht funktionieren zu scheint, ist dass das Galerie Element dem a Tag nicht "data-lightbox" übergibt.

Wenn ich versuche ein Youtube Video manuell per HTML einzubinden scheint es zu funktionieren, aber über die Galerie kann ich es nicht zwischen Bilder einbinden. Gibt es die Möglichkeit das ich das irgendwie über Änderungen an gallery_default reparieren kann?

Hast du in der Galerie eingestellt, dass Bilder in einem neuen Fenster bzw. Großansicht geöffnet werden sollen?

Zitat:

---

Zitat von Spooky

Hast du in der Galerie eingestellt, dass Bilder in einem neuen Fenster bzw. Großansicht geöffnet werden sollen?

---

Ja habe ich eingestellt, bei den Bildern in der Galerie funktioniert die Lightbox einwandfrei.

Den Youtube Link habe ich mit "/embed/" einfach im Bild als Linkadresse hinzugefügt.

Als Theme verwende ich "Eclipse" von Premium-Contao-Themes, das sollte hierbei aber nicht relevant sein da ich die Standard Templates verwende?

Zitat:

---

Zitat von Filip

Ja habe ich eingestellt, bei den Bildern in der Galerie funktioniert die Lightbox einwandfrei.

---

Ok, aber du hast ja geschrieben, dass genau das eben nicht funktioniert ;)

Zitat:

---

Zitat von Spooky

Ok, aber du hast ja geschrieben, dass genau das eben nicht funktioniert ;)

---

Dann habe ich das falsch formuliert. Bilder funktionieren, Youtube Links/Videos funktionieren nicht.

Also wenn ich im Bild einen Youtube Link verwende wird im Frontend nicht das Attribut data-lightbox bei Elementen mit Links ausgegeben.

Meine j_lightbox sieht so aus:

HTML-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>
  (function($) {
    $(document).ready(function() {
      $('a[data-lightbox]').map(function() {
        var isIFrame = false;

        if($(this).attr('href').split('.').pop() == 'html' || $(this).attr('href').indexOf('youtube.com') != -1) {
          isIFrame = true;
        }

        $(this).colorbox({
          // Put custom options here
          loop: false,
          rel: $(this).attr('data-lightbox'),
          maxWidth: '95%',
          maxHeight: '95%',
          width: isIFrame ? '60%' : false,
          height: isIFrame ? '70%' : false,
          iframe: isIFrame
        });
      });
    });
  })(jQuery);
</script>

---

Anbei noch ein Screenshot wie die Ausgabe im Frontend aussieht.

Poste mal einen Link zur Seite.

Hier der Link

Das letzte Bild mit dem blauen Hintergrund beeinhaltet das Youtube Video als Link.

Ja, Contao schreibt kein data-lightbox Attribut für den Link, wenn ein Link in der Dateiverwaltung hinterlegt ist. Das müsstest du in diesem Fall selbst machen.

Gibt es da eine vorgehensweise die du mir empfehlen würdest wie ich das am besten im Template löse? Oder gibt es da einen besseren weg Contao "beizubringen", über einen hook, das es einem Link ebenfalls das Attribut data-lightbox übergibt?

Im moment sieht das Template so aus:

HTML-Code:

---

<ul class="cols_<?php echo $this->perRow; ?> gallery-margin" id="gallery_<?php echo $this->id; ?>" itemscope itemtype="http://schema.org/ImageGallery">
  <?php foreach ($this->body as $class=>$row): ?>
    <?php foreach ($row as $col): ?>
      <?php if ($col->addImage): ?>
        <li class="entry row<?php echo $this->perRow; ?> <?php echo $col->class; ?>">
                <figure class="image_container" itemscope itemtype="http://schema.org/ImageObject">
                   
            <?php $this->insert('picture_default', $col->picture); ?>
                     
            <?php if ($col->href): ?>
            <a href="<?php echo $col->href; ?>"<?php echo $col->attributes; ?> title="<?php echo $col->alt; ?>" itemprop="contentUrl">
            <?php endif; ?>
           
            <?php if ($col->href || $col->caption): ?>
            <div class="content">
                    <div class="content-outside">
                                <div class="content-inside">                       
                                                <div class="capt" itemprop="caption"><?php echo $col->caption; ?></div>
                                        <?php if (strlen($col->href) > 0 && strlen($col->caption) < 1): ?>
                                                <i class="fa fa-plus-circle fa-3x"></i>
                                          <?php endif; ?>
                            </div>
                    </div>
            </div>
            <?php endif; ?>

            <?php if ($col->href): ?>
            </a>
            <?php endif; ?>
           
          </figure>
        </li>
      <?php endif; ?>
    <?php endforeach; ?>
  <?php endforeach; ?>
</ul>

---

Für die, die diesen Thread vielleicht auf Google finden: Ich habe mir einen kleinen unsauberen Fix im Template gebastelt:

In gallery_default.html5 habe ich folgenden Code im <a> Tag ergänzt. Also praktisch habe ich einfach das Lightbox Attribut des ersten Bildes genommen, um mit diesem die Attribute der fehlenden Einträge zu überschreiben, funktioniert leider nicht, wenn das erste Bild schon einen iFrame Link hat.

PHP-Code:

---

<a href="<?php echo $col->href; ?>"
  <?php 
  if (strpos($col->attributes, "target") !== false) {
    $col->attributes = $row[0]->attributes;;
  }
  echo $col->attributes;?> 
  title="<?php echo $col->alt; ?>" itemprop="contentUrl">

---

Weil ich genau nach dem gleichen Problem noch mal gesucht habe und meinen eigenen Thread gefunden habe, möchte ich hiermit eine bessere Lösungsvariante bieten:

Statt der Lightbox ID des ersten Galerie Bilds, habe ich einfach die Content ID des Elements genommen um den String selbst zu bauen.

Code:

---

<a href="<?php echo $col->href; ?>"
<?php
if (strpos($col->attributes, "target") !== false) {
  $col->attributes = "data-lightbox='lb" . $this->id . "'";
}
echo $col->attributes;?>
title="<?php echo $col->alt; ?>" itemprop="contentUrl">

---