嵌套在另一个函数中的Fancybox函数不起作用

Question

I'm working on converting my gallery thumbnails into fancybox links but when I'm trying to target the image content under the .gallery-overlay , it doesn't work and the page just redirects to the photo's source. What am I doing wrong here? JQuery and fancybox linked properly,

$('.gallery-overlay').click(function(){
    $(this).find('.fancybox').fancybox();
});

brings out the fancybox after 2 (!) clicks, but in a useless, incorrect way.

 $(document).ready(function() { $('.gallery-overlay').click(function() { $(this).children('img').fancybox(); }); }); 

 .gallery-overlay { position: relative; width: 100%; transition: 1s; } .gallery-overlay img { z-index: -1; position: relative; } .gallery-overlay:hover { background-image: linear-gradient(rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .7)70%); transition: 1s; } .gallery-caption { color: white; top: 75%; text-transform: uppercase; font-weight: bold; position: absolute; width: 100%; opacity: 0; z-index: 102; transition: 1s; } .gallery-item:hover .gallery-caption { display: block; transition: 1s; opacity: 1; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js" type="text/javascript" charset="utf-8"></script> <div class="row"> <div class="col-sm-4 gallery-item"> <div class="gallery-overlay"> <a class="fancybox" rel="portfolio" href="photos/office_woman_l.jpg"> <img class="img-responsive" src="photos/thumbnail.jpeg" alt="thumbnail"> </a> </div> <h3 class="gallery-caption text-center">Item caption</h3> </div> <div class="col-sm-4 gallery-item"> <div class="gallery-overlay"> <a class="fancybox" rel="portfolio" href="photos/laptop_l.jpg"> <img class="img-responsive" src="photos/thumbnail.jpeg" alt="thumbnail"> </a> </div> <h3 class="gallery-caption text-center">Item caption</h3> </div> <div class="col-sm-4 gallery-item"> <div class="gallery-overlay"> <a class="fancybox" rel="portfolio" href="photos/glasses_woman_l.jpg"> <img class="img-responsive" src="photos/thumbnail.jpeg" alt="thumbnail"> </a> </div> <h3 class="gallery-caption text-center">Item caption</h3> </div> </div> 

Answer 1

Fancybox works when clicking the a element which has a class fancybox not the image, so your script must be like this:

$(document).ready(function() {
  $('.gallery-overlay a').fancybox();
});

https://jsfiddle.net/IA7medd/ds5j8vz5/

Answer 2

You should apply the .fancybox() to tag <a> and prevent the click event on this tag. Also, you should put the tag <h3> for inside the .gallery-overlay . When the caption appears, it covers the .gallery-overlay and the click event isn't triggered.

$(document).ready(function() {
    $('.gallery-overlay').click(function(e) {
        e.preventDefault();
        $(this).children('a').fancybox();
    });
});

https://jsfiddle.net/alexndreazevedo/u9d2pwo8/