具有数据库和爆炸功能的图库

我正在尝试创建一个图像库，其中顶部有一个大图像，底部有一些缩略图图像。让我参考我在这里提出的最后一个问题。

图库使用 php css 和 javascript

所以我编辑了上面的代码并添加了爆炸功能和 MySQL 数据库。由于我在一个页面上有超过 1 个图库(由于类别)。我已经以这种格式存储了图像名称(reception.jpg？reception2.jpg？reception3.jpg)，它存储在 myphpadmin 的 img 列下。但是，当我尝试应用更改时，似乎 php/html 和 css 代码一起工作正常。但它似乎也无法读取我放在页面最底部的脚本标签。 JS 代码包含与上面链接相同的代码。你知道我错在哪里吗？它能够阅读其余部分。和悬停效果工作。就是这样，点击时不会选择缩略图。我尝试在另一个页面上重新构建它，只要脚本标记在head标记内，它就可以正常工作

这是我做的修改

<?php 
                        $gallery = $value['img'];
                        $gallery = explode("?", $gallery); 

                        if(!empty($gallery)) { ?>
                        <div class="eight-eight" id="gHolder">
                                <div class="eight-eight" id="theBigImageHolder">
                                    <img src="includes/images/<?php echo $gallery[0]; ?>" id="bigImage">
                                </div>
                                <div class="eight-eight" id="thumbnailsHolder">
                                    <?php foreach($gallery as $key => $item){ ?>
                                        <img src="includes/images/<?php echo $item; ?>">
                                    <?php } ?>
                                </div> 
                            </div>
                            <?php } ?>

这是任何人都会问的完整代码

require_once 'includes/templates/header.php';
require_once 'core/connection.php';
$facility = new Facility;
$facilities = $facility->all();
?>
<!-- General Public View -->
    <div class="container">
        <?php include_once 'includes/templates/banner.php'; ?>
        <div class="full">
            <span class="eight-eight">
                <?php include_once 'includes/templates/nav.php'; ?>
            </span>
        </div>
        <div class="full">
            <h1 id="catchphrase">Facilities</h1>
        </div>
        <div class="full facilities">
            <?php
                foreach ($facilities as $key => $value) { ?>
                    <span class="four-eight grid">
                        <h2><?php echo $value['name'];?></h2>
                        <!---Start Image Gallery -->
                        <?php 
                        $gallery = $value['img'];
                        $gallery = explode("?", $gallery); 

                        if(!empty($gallery)) { ?>
                        <div class="eight-eight" id="gHolder">
                                <div class="eight-eight" id="theBigImageHolder">
                                    <img src="includes/images/<?php echo $gallery[0]; ?>" id="bigImage">
                                </div>
                                <div class="eight-eight" id="thumbnailsHolder">
                                    <?php foreach($gallery as $key => $item){ ?>
                                        <img src="includes/images/<?php echo $item; ?>">
                                    <?php } ?>
                                </div> 
                            </div>
                            <?php } ?>
                            <!---End Image Gallery -->
                        <p class="eight-eight"><?php echo $value['description'];?></p>
                    </span>
                <?php }
            ?>
        </div>
        <?php include_once 'includes/templates/footer.php'; ?>
    </div>
<?php }

?>
<script type="text/javascript">
    var doi = '2015/10/15';
    $('#clock').countdown(doi, function(event) {
    $(this).html(event.strftime('%D Days %H:%M:%S')); });
</script>

<script type="text/javascript">
      function imgFunc(){
          var bigImage = document.getElementById("bigImage");
          var thumbnailsHolder = document.getElementById("thumbnailsHolder");

          thumbnailsHolder.addEventListener("click",function(event){
            if (event.target.tagName == "IMG") {
              bigImage.src = event.target.src;
            }
          }, false);
      }
      window.addEventListener("load",imgFunc,false);
  </script>