StackOverflow - Fancybox function nested into another function doesn't work

http://stackoverflow.com/questions/37274511/fancybox-function-nested-into-another-function-doesnt-work/37275161#37275161

by Alexandre Azevedo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css">
<div class="row">
  <div class="col-sm-4 gallery-item">
    <div class="gallery-overlay">
      <a class="fancybox" rel="portfolio" href="//c7.staticflickr.com/8/7494/26770687630_f513dac700_z.jpg">
        <img class="img-responsive" src="//c7.staticflickr.com/8/7494/26770687630_f513dac700_n.jpg" alt="thumbnail">
      </a>
      <h3 class="gallery-caption text-center">Item caption</h3>
    </div>
  </div>
  <div class="col-sm-4 gallery-item">
    <div class="gallery-overlay">
      <a class="fancybox" rel="portfolio" href="//c1.staticflickr.com/8/7054/26777561160_37c73cc343_z.jpg">
        <img class="img-responsive" src="//c1.staticflickr.com/8/7054/26777561160_37c73cc343_n.jpg" alt="thumbnail">
      </a>
	  <h3 class="gallery-caption text-center">Item caption</h3>
    </div>
  </div>
  <div class="col-sm-4 gallery-item">
    <div class="gallery-overlay">
      <a class="fancybox" rel="portfolio" href="//c7.staticflickr.com/8/7478/27022381846_c861f95f6f_z.jpg">
        <img class="img-responsive" src="//c7.staticflickr.com/8/7478/27022381846_c861f95f6f_n.jpg" alt="thumbnail">
      </a>
      <h3 class="gallery-caption text-center">Item caption</h3>
    </div>
  </div>
</div>

CSS

.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;
}

JavaScript

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