[英]Replace click event to open magnific popup with hover
My images already have a click event that opens the magnific popup lightbox, but I need to remove that and replace with a hover that opens the lightbox instead. 我的图片已经有一个click事件,可以打开宏伟的弹出灯箱,但是我需要将其删除,并用悬停代替,以打开灯箱。
Tried this but no dice: 尝试过但没有骰子:
<script type="text/javascript">
jQuery(document).mouseover(function(){
jQuery('a.et_pb_lightbox_image').magnificPopup({type:'image'});
});
</script>
This is my html: 这是我的html:
<a href="https://blackdot.strutcreativestudios.com/wp-content/uploads/2018/04/Deep-Bevel.jpg" class="et_pb_lightbox_image">
<span class="et_pb_image_wrap">
<img src="https://blackdot.strutcreativestudios.com/wp-content/uploads/2018/04/Deep-Bevel.jpg" alt="">
</span>
</a>
And this is the html when the image is clicked and the lightbox is open: 这是单击图像并打开灯箱时的html:
<div class="mfp-bg mfp-ready"></div>
<div class="mfp-wrap mfp-close-btn-in mfp-auto-cursor mfp-ready" tabindex="-1" style="overflow-x: hidden; overflow-y: auto;">
<div class="mfp-container mfp-s-ready mfp-image-holder">
<div class="mfp-content">
<div class="mfp-figure">
<button title="Close (Esc)" type="button" class="mfp-close">×</button>
<figure>
<img class="mfp-img" alt="" src="https://blackdot.strutcreativestudios.com/wp-content/uploads/2018/04/Deep-Bevel.jpg" style="max-height: 318px;">
<figcaption>
<div class="mfp-bottom-bar">
<div class="mfp-title"></div>
<div class="mfp-counter"></div>
</div>
</figcaption>
</figure>
</div>
</div>
<div class="mfp-preloader">Loading...</div>
</div>
</div>
Update: I'm a little closer... tried this out but no dice: 更新:我离我有点近了……尝试了一下,但是没有骰子:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('a.et_pb_lightbox_image').bind('mouseover', function(event){
.magnificPopup();
});
});
</script>
Then I tried this out to test just the binding component, and it worked: 然后,我尝试了一下,仅测试了绑定组件,然后它起作用了:
<script type="text/javascript">
jQuery(document).ready(function() {
('a.et_pb_lightbox_image').bind('mouseover', function(event){
alert('Hi there!');
});
});
</script>
Which means its something in that .magnificPopup();
这意味着它在
.magnificPopup();
中的.magnificPopup();
section that is incorrect. 部分不正确。 Looked at documentation but it appears that this is correct?
看了文档,但看来这是正确的吗? Can anyone tell what it is I'm missing?
谁能说出我想念的是什么?
Solved: 解决了:
Thanks @Janis and the solution here - Trigger fancybox with hover instead of click? 感谢@Janis和这里的解决方案- 使用悬停而不是单击来触发fancybox? .
。 Here's how I got it to finally work:
这是我如何使其最终工作的方法:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('a.et_pb_lightbox_image').magnificPopup().hover(function() {
jQuery(this).click();
});
});
</script>
您可以尝试在hover
事件中触发click
事件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.