[SOLVED] fancybox 3 card-body click event

fancybox 3 card-body click event

I am using fancybox 3, there is no problem, the thing I want to do is to click on "card-body" and I want the relevant "card" to be opened. I have a situation like that I do not want to be repeated fancybox.

It works in the link I gave below, but it doesn't work when I do.

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-width="640" data-height="360" 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 width="640" height="320" 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>

Solution

When the body is clicked, you want the relevant card description, I think you can solve it this way.

$('.card-body').on('click', function() {
  $(this).parent().find("a").trigger('click'); 
});