[英]Open lightgallery.js programmatically
So I'm using https://sachinchoolur.github.io/lightgallery.js/ for my gallery and it's great. 所以我在我的画廊中使用https://sachinchoolur.github.io/lightgallery.js/ ,这很棒。
When user clicks and image it opens and all is well. 当用户单击并显示图像时,一切正常。
<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>
However, I have an edge case where I want the user to be able to press another image on the page to open the gallery. 但是,我有一个极端的情况,我希望用户能够按页面上的另一张图像来打开图库。
Let's pretend it's this a tag 我们假装这是一个标签
<a id="magic_start" href="">
I thought I'd be able to do this: 我以为我可以做到这一点:
$("#magic_start").click(function(e) {
e.preventDefault();
$("#lightgallery li:first-child a").trigger();
});
I've also tried, click() and trigger('click') but they don't work. 我也尝试过click()和trigger('click'),但是它们不起作用。
I think because lightgallery.js is it's own man, so to speak. 我认为因为lightgallery.js是它自己的人,所以可以这么说。
But it does nothing. 但是它什么也没做。 No errors, but does nothing.
没有错误,但是什么也没做。
Any suggestions? 有什么建议么?
Edit: 编辑:
My current workaround is... 我目前的解决方法是...
window.location.href = window.location.href + "#lg=1&slide=0";
location.reload();
But this takes a way from UX due to having to reload page. 但是由于必须重新加载页面,因此这需要从UX使用一种方法。
The trigger
function needs to be called on the img
element, and not the outer a
element. trigger
函数需要在img
元素上调用,而不是在外部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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.