我正在制作专辑页面,并且我有 this脚本将在更大的窗口中打开图像,以便我可以更好地看到它,缩放,下载等。
我对其进行了一些修改,然后我从数据库中生成了 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>
最佳答案
创建灯光图库时使用选择器选项来设置打开图库的选择器,
<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 检查下面的 fiddle https://jsfiddle.net/suhailsulu/Lya1hdtm/
关于javascript - 仅当单击 div 的特定部分时才打开 javascript 操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54945208/