fancybox 3 卡体点击事件
Posted
技术标签:
【中文标题】fancybox 3 卡体点击事件【英文标题】：fancybox 3 card-body click event 【发布时间】：2021-02-20 14:05:47 【问题描述】：我用的是fancybox 3，没问题，我要做的就是点击“card-body”，我想打开相关的“card”。 我有这样的情况我不想被fancybox重复。
它在我下面给出的链接中有效，但当我这样做时它不起作用。
Example
$('[data-fancybox]').fancybox(
buttons : ['share', 'close'],
hash : false,
share :
url : function( instance, item )
if (item.type === 'inline' && item.contentType === 'video')
return item.$content.find('source:first').attr('src');
return item.src;
);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.css">
<body>
<hr class="my-5" />
<div class="row">
<div class="card-deck col-9">
<div class="card">
<a data-fancybox data-small-btn="false" data- data- href="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4">
<img class="card-img-top img-fluid" src="https://peach.blender.org/wp-content/uploads/bird1.jpg" />
</a>
<div class="card-body">
<p class="card-text"><a href="#">Direct link to HTML5 video</a></p>
</div>
</div>
<div class="card">
<a data-fancybox data-small-btn="false" href="#myVideo" data-small-btn="false">
<img class="card-img-top img-fluid" src="https://www.html5rocks.com/en/tutorials/video/basics/poster.png" />
</a>
<div class="card-body">
<p class="card-text"><a href="#">HTML5 video from the page</a></p>
</div>
<video controls id="myVideo" style="display:none;">
<source src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.mp4" type="video/mp4">
<source src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.webm" type="video/webm">
<source src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.ogv" type="video/ogg">
Your browser doesn't support HTML5 video tag.
</video>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
</body>
</html>【问题讨论】：
【参考方案1】：body被点击的时候，想要相关的卡片描述，我觉得可以这样解决。
$('.card-body').on('click', function()
$(this).parent().find("a").trigger('click');
);
【讨论】：
以上是关于fancybox 3 卡体点击事件的主要内容，如果未能解决你的问题，请参考以下文章