僅在單擊div的特定部分時才打開JavaScript操作

Question

我正在相冊頁面上工作，並且我有此腳本可以在更大的窗口中打開圖像，以便更好地查看，縮放，下載等。

我對其做了一些修改，並且正在從數據庫中的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上的什么位置，它都可以打開圖片。 即使我單擊Delete按鈕，它也會像腳本一樣在更大的窗口中打開圖片。

以及所需的javascript，因為它們隱藏在codepin.io上

 <script src="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/js/lightgallery.js"></script>
                     <script src="https://cdn.rawgit.com/sachinchoolur/lg-autoplay.js/master/dist/lg-autoplay.js"></script>
                     <script src="https://cdn.rawgit.com/sachinchoolur/lg-fullscreen.js/master/dist/lg-fullscreen.js"></script>
                     <script src="https://cdn.rawgit.com/sachinchoolur/lg-zoom.js/master/dist/lg-zoom.js"></script>
                     <script> lightGallery(document.getElementById('lightgallery')); </script>

Answer 1

創建燈庫時使用選擇器選項來設置用於打開庫的選擇器，

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

在上面的代碼中，我使用了具有“ imgu”類的圖像作為畫廊的選擇器，因此它僅在單擊圖像時才會打開，還為img標簽提供了data-src和data-sub-html檢查下面的小提琴https://jsfiddle.net/suhailsulu/Lya1hdtm/