仅当单击div的特定部分时才打开javascript操作

我正在制作一个相册页面，我有一个脚本，可以在一个更大的窗口中打开图像，这样我可以更好地看到它，缩放，下载，等等

我对它做了一些修改，并从我的数据库中生成了一个

foreach

中的图片

         <div id="lightgallery" class="row" >

             <?php $x=1; ?>
            <?php foreach ($this->upload as $upload): ?>
            <?php $dir = Users::currentUser()->id; ?>

                          <div class="col-sm-3"  data-src="<?= PROOT . 'files' . DS . $dir  . DS . $upload->name ;?>" data-sub-html="<h4><?=$upload->name ?></h4>">

                                <div class="thumbnail text-center">
                                  <img src="<?= PROOT . 'files' . DS . $dir  . DS . $upload->name ;?>" alt="Thumb-<?=$x?>" class="imgu">

                                </div>

                                <div class="caption text-center">
                                  <hr>
                             <p><?= $upload->name;?> </p>
                                   <div class="text-center">
                                     <a href="<?=PROOT?>upload/delete/<?=$upload->id?>" class="btn btn-danger btn-xs " onclick="if(!confirm('Are you sure ?')){return false;} target='_blank' ">
                                       Delete
                                     </a>
                                   </div>
                               </div>
                          </div>
                     <?php $x++; ?>
                     <?php endforeach; ?>
                     </div>

---

在创建灯光库时使用选择器选项设置用于打开库的选择器

<div class="col-sm-3">

        <div class="thumbnail text-center">
          <img src="https://dummyimage.com/300" alt="Thumb" class="imgu" data-src="https://dummyimage.com/300" data-sub-html="<h4>name </h4>">

        </div>

        <div class="caption text-center">
          <hr>
          <div>
            test div
          </div>
          <div class="text-center">
            <a href="<?=PROOT?>upload/delete/<?=$upload->id?>" class="btn btn-danger btn-xs " onclick="if(!confirm('Are you sure ?')){return false;} target='_blank' ">
                                           Delete
                                         </a>
          </div>
        </div>
      </div>

    </div>



<script>
     lightGallery(document.getElementById('lightgallery'), {
      selector: ".imgu"
     });
</script>  

名称“>

试验室
lightGallery（document.getElementById（'lightGallery'）{
选择器：“.imgu”
});

在上面的代码中，我使用了类为“imgu”的图像作为gallery的选择器，因此它只会在单击图像时打开，还为img标记提供数据src和数据子html 检查下面的小提琴

---

打开更大窗口的代码在哪里？？？@suhailc这是一个javascript，将打开它

lightGallery（document.getElementById（'lightGallery'）；

添加问题中的完整脚本删除

id=“lightGallery”）“

从主div将其添加到

阅读您正在使用的脚本的文档！这些脚本通常由DOM中的类和/或属性触发。（这里可能涉及

data src

和

data sub html

，因此，在这种情况下，您可能必须将它们放在离图像更近的元素上，如图像周围的链接……）您的方法似乎可行，但我不再使用左/右按钮。有什么想法吗？如果你有一个以上的图像，它将工作检查我的最新小提琴

<div class="col-sm-3">

        <div class="thumbnail text-center">
          <img src="https://dummyimage.com/300" alt="Thumb" class="imgu" data-src="https://dummyimage.com/300" data-sub-html="<h4>name </h4>">

        </div>

        <div class="caption text-center">
          <hr>
          <div>
            test div
          </div>
          <div class="text-center">
            <a href="<?=PROOT?>upload/delete/<?=$upload->id?>" class="btn btn-danger btn-xs " onclick="if(!confirm('Are you sure ?')){return false;} target='_blank' ">
                                           Delete
                                         </a>
          </div>
        </div>
      </div>

    </div>



<script>
     lightGallery(document.getElementById('lightgallery'), {
      selector: ".imgu"
     });
</script>