Contao-Camp 2024
Ergebnis 1 bis 11 von 11

Thema: Galerie übergibt Bilder nicht Data-Lightbox

  1. #1
    Contao-Nutzer Avatar von Filip
    Registriert seit
    28.07.2017.
    Beiträge
    113

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

  2. #2
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.883
    Partner-ID
    10107

    Standard

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

  3. #3
    Contao-Nutzer Avatar von Filip
    Registriert seit
    28.07.2017.
    Beiträge
    113

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    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?
    Geändert von Filip (10.05.2019 um 11:50 Uhr)

  4. #4
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.883
    Partner-ID
    10107

    Standard

    Zitat Zitat von Filip Beitrag anzeigen
    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

  5. #5
    Contao-Nutzer Avatar von Filip
    Registriert seit
    28.07.2017.
    Beiträge
    113

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    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.
    Angehängte Grafiken Angehängte Grafiken

  6. #6
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.883
    Partner-ID
    10107

    Standard

    Poste mal einen Link zur Seite.

  7. #7
    Contao-Nutzer Avatar von Filip
    Registriert seit
    28.07.2017.
    Beiträge
    113

    Standard

    Hier der Link

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

  8. #8
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.883
    Partner-ID
    10107

    Standard

    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.

  9. #9
    Contao-Nutzer Avatar von Filip
    Registriert seit
    28.07.2017.
    Beiträge
    113

    Standard

    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>

  10. #10
    Contao-Nutzer Avatar von Filip
    Registriert seit
    28.07.2017.
    Beiträge
    113

    Standard

    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">

  11. #11
    Contao-Nutzer Avatar von Filip
    Registriert seit
    28.07.2017.
    Beiträge
    113

    Standard

    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">

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •