以编程方式打开 lightgallery.js
Open lightgallery.js programmatically
所以我正在为我的画廊使用 https://sachinchoolur.github.io/lightgallery.js/,它很棒。
当用户点击并打开图像时,一切正常。
<div id="lightgallery">
<a href="img/img1.jpg">
<img src="img/thumb1.jpg" />
</a>
<a href="img/img2.jpg">
<img src="img/thumb2.jpg" />
</a>
...
</div>
<script type="text/javascript">
lightGallery(document.getElementById('lightgallery'));
</script>
但是,我有一个极端情况,我希望用户能够按下页面上的另一张图片来打开画廊。
假设这是一个标签
<a id="magic_start" href="">
我以为我能做到:
$("#magic_start").click(function(e) {
e.preventDefault();
$("#lightgallery li:first-child a").trigger();
});
我也试过了,click() 和 trigger('click') 但它们不起作用。
我想是因为lightgallery.js可以说是自己的人。
但它什么也没做。没有错误,但什么也没做。
有什么建议吗?
编辑:
我目前的解决方法是...
window.location.href = window.location.href + "#lg=1&slide=0";
location.reload();
但由于必须重新加载页面,这与用户体验有所不同。
需要在 img
元素上调用 trigger
函数,而不是外部 a
元素。
lightGallery(document.getElementById('lightgallery'));
$("#magic_start").on("click", () => {
$("#lightgallery a:first-child > img").trigger("click");
});
<!-- lightgallery and jQuery vendor CSS/JS -->
<link rel="stylesheet" href="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/css/lightgallery.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/js/lightgallery.js"></script>
<a id="magic_start" href="#">CLICK TO OPEN</a>
<div id="lightgallery">
<a href="https://via.placeholder.com/350">
<img src="https://via.placeholder.com/150" />
</a>
<a href="https://via.placeholder.com/350">
<img src="https://via.placeholder.com/150" />
</a>
</div>
所以我正在为我的画廊使用 https://sachinchoolur.github.io/lightgallery.js/,它很棒。
当用户点击并打开图像时,一切正常。
<div id="lightgallery">
<a href="img/img1.jpg">
<img src="img/thumb1.jpg" />
</a>
<a href="img/img2.jpg">
<img src="img/thumb2.jpg" />
</a>
...
</div>
<script type="text/javascript">
lightGallery(document.getElementById('lightgallery'));
</script>
但是,我有一个极端情况,我希望用户能够按下页面上的另一张图片来打开画廊。
假设这是一个标签
<a id="magic_start" href="">
我以为我能做到:
$("#magic_start").click(function(e) {
e.preventDefault();
$("#lightgallery li:first-child a").trigger();
});
我也试过了,click() 和 trigger('click') 但它们不起作用。
我想是因为lightgallery.js可以说是自己的人。
但它什么也没做。没有错误,但什么也没做。
有什么建议吗?
编辑:
我目前的解决方法是...
window.location.href = window.location.href + "#lg=1&slide=0";
location.reload();
但由于必须重新加载页面,这与用户体验有所不同。
需要在 img
元素上调用 trigger
函数,而不是外部 a
元素。
lightGallery(document.getElementById('lightgallery'));
$("#magic_start").on("click", () => {
$("#lightgallery a:first-child > img").trigger("click");
});
<!-- lightgallery and jQuery vendor CSS/JS -->
<link rel="stylesheet" href="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/css/lightgallery.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/js/lightgallery.js"></script>
<a id="magic_start" href="#">CLICK TO OPEN</a>
<div id="lightgallery">
<a href="https://via.placeholder.com/350">
<img src="https://via.placeholder.com/150" />
</a>
<a href="https://via.placeholder.com/350">
<img src="https://via.placeholder.com/150" />
</a>
</div>