我的图片已经有一个点击事件可以打开这个巨大的弹出式灯箱,但我需要将其删除并替换为打开灯箱的悬停。
试过这个但没有骰子:
<script type="text/javascript">
jQuery(document).mouseover(function(){
jQuery('a.et_pb_lightbox_image').magnificPopup({type:'image'});
});
</script>
这是我的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>
当点击图像并且灯箱打开时,这是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>
更新:我离得更近了......尝试了这个,但没有骰子:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('a.et_pb_lightbox_image').bind('mouseover', function(event){
.magnificPopup();
});
});
</script>
然后我尝试了这个来测试绑定组件,它起作用了:
<script type="text/javascript">
jQuery(document).ready(function() {
('a.et_pb_lightbox_image').bind('mouseover', function(event){
alert('Hi there!');
});
});
</script>
这意味着.magnificPopup();
部分中的某些内容不正确。看看文档,但似乎这是正确的?任何人都能说出我错过的是什么吗?
解决:
感谢@Janis及其解决方案 - Trigger fancybox with hover instead of click?。以下是我如何让它最终发挥作用:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('a.et_pb_lightbox_image').magnificPopup().hover(function() {
jQuery(this).click();
});
});
</script>
答案 0 :(得分:0)
您可以尝试在click
事件中触发hover
事件。