Lightgallery funktioniert nicht beim Hinzufügen von h1-Tag?

Question

Ich benutze Lightgallery und alles funktioniert, außer wenn ich ein <h1> Tag innerhalb einer foreach Schleife widerhallen. Wenn ich es entferne, funktioniert die Galerie gut.

Das einzige Problem, wenn ich das <h1> Tag hinzufügen, ist, dass die Bilder nicht geladen werden. Ich sehe nur, dass der Preloader für immer geladen wird. Was könnte das verursachen?

Mein Code:

<div id="lightgallery" style="border-top: 2px solid rgb(230, 230, 230);"> 
    <? 
    $dir = $_SERVER['DOCUMENT_ROOT'].'/images/PROJECTEN/'; 
    $folders = array_diff(scandir($dir), array('index.html', '.', '..')); 

    function scan_dir($dir) { 
     $ignored = array('.', '..', '.svn', '.htaccess','index.html'); 

     $files = array(); 
     foreach (scandir($dir) as $file) { 
      if (in_array($file, $ignored)) continue; 
      $files[$file] = filemtime($dir . '/' . $file); 
     } 

     arsort($files); 
     $files = array_keys($files); 

     return ($files) ? $files : false; 
    } 

    foreach($folders as $gallerypart){ 
     $nounderscore = str_replace('_', ' ', $gallerypart); 
     $gallery .= '<h1>'.$nounderscore.'</h1>'; 
     foreach(scan_dir($_SERVER['DOCUMENT_ROOT'].'/images/PROJECTEN/'.$gallerypart.'/') as $entry) { 

      $gallery .= ' 
       <a href="http://www.website.nl/images/PROJECTEN/'.$gallerypart.'/'.$entry.'"> 
        <img class="galleryimg" src="http://www.website.nl/images/PROJECTEN/'.$gallerypart.'/'.$entry.'" /> 
       </a>'; 
     } 

    } 
    echo $gallery; 
    ?> 
</div> 

Dies ist der Teil, der es bricht:

$gallery .= '<h1>'.$nounderscore.'</h1>'; 

Answer 1

ich es behoben, indem stattdessen die Standard-Markup verwenden, ich einen Selektor verwendet.

So:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#selector1').lightGallery({ 
      selector: '.item' 
     }); 
    }); 
</script> 

Und dann in der Schleife ich den folgenden Code hinzugefügt:

$gallery .= ' 
<div class="item" data-src="http://www.website.nl/images/PROJECTEN/'.$gallerypart.'/'.$entry.'"> 
    <img class="galleryimg" src="http://www.website.nl/images/PROJECTEN/'.$gallerypart.'/'.$entry.'" /> 
</div>';