Fancybox does not work when thumbnails contain an overlay div

Question

I prepared a list of thumbnails that should work with Fancybox. However I want also that, on mouse hover the thumbnail changes color and a title appears (this should happen before clicking).

I prepared my HTML as follows:

<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/jquery.fancybox.js"></script>
<link href="css/jquery.fancybox.css" rel="stylesheet" media="screen">

<script><!-- I think you missed this -->
var tpj=jQuery;
tpj.noConflict();
tpj(document).ready(function() {
    /*
     *  Simple image gallery. Uses default settings
     */

    tpj('.fancybox').fancybox();

});
</script>

<ul class="gallery">
        <li class="gallery-item">
            <a class="hover-wrap fancybox" href="Images/Img_0107.jpg" data-fancybox-group="gallery" ><img src="Images/gallery-1.jpg" alt="">
            </a>
            <div class="overlay">
              <div class="overlay-text">
                <h3>The house</h3>
                    <span class="caption">The garden</span>
              </div>
             </div>
        </li>
        <li class="gallery-item">
            <a class="hover-wrap fancybox" href="Images/Img_0107.jpg" data-fancybox-group="gallery" ><img src="Images/gallery-2.jpg" alt="">
            </a>
            <div class="overlay">
              <div class="overlay-text">
                <h3>The house</h3>
                    <span class="caption">The garden</span>
              </div>
             </div>

        </li>
    </ul>

and the relative CSS as follows

.gallery {
  margin: 60px 0 0 0; 
  padding: 0;
}
.gallery-item {
  width: 25%;
  min-height: 100px; 
  margin: 0;
  display: inline-block;
  float: left;
  overflow: hidden;
  position: relative;
}
.gallery-item .hover-wrap {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.gallery-item img {
  width: 100%;
}
.gallery-item img {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.gallery-item:hover img {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
   transform: scale(1.1);
}
.gallery-item .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  opacity: 0;
  filter: alpha(opacity=0);
  background-color: rgba(1, 188, 158, .75);
  background-image: url(../Images/icon-magnifier.png);
  background-position: center 40%;
  background-repeat: no-repeat;
  -webkit-transition: opacity 0.15s ease-in-out 0s;
  -moz-transition: opacity 0.15s ease-in-out 0s;
  -o-transition: opacity 0.15s ease-in-out 0s;
  transition: opacity 0.15s ease-in-out 0s;
}
.gallery-item:hover .overlay {
  opacity: 1;
  filter: alpha(opacity=1);
  cursor:pointer;
}
.gallery-item .overlay-text {
  position: absolute;
  bottom: 20px;
  left: 20px;
}
.gallery-item .overlay-text h3 {
  font-size: 1.4rem;
  color: #fff;
  font-weight: normal;
  margin-bottom: 0;
}
.gallery-item .overlay-text .caption {
  font-family: 'OpenSans', serif;
  font-style: italic;
  color: #fff;
  font-size: 1.6rem;
  line-height: 28px;
}

It seems that, by having a div (.overlay) over the thumbnail the Fancybox doesn't work.Am I doing something wrong? Consider that I have written here only the basic CSS involved in the problem, thus the overall effect of the container is not as it should be.

Thank you for helping!

As you suspected, the issue is more than likely the overlay. Since the overlay element sits on-top of your fancybox element, the user is clicking on the overlay element, not the fancybox element. Maybe target the fancybox element itself with your hover action for the opacity. You can put the text element in as a child to the fancybox to have it react to a fancybox hover action. — jacobcc

JFK JFK · Accepted Answer · 2014-11-20T21:12:20

As pointed out in the comments, when you click on the .gallery-item element, the actual target is the .overlay selector and not the .fancybox selector so the latest never gets fired.

You may need to add a click event handler for the .overlay that triggers its .fancybox sibling selector like :

var tpj = jQuery;
tpj.noConflict();
tpj(document).ready(function () {
    /*
     *  Simple image gallery. Uses default settings
     */
    tpj('.fancybox').fancybox();
    tpj(".overlay").on("click", function (event) {
        event.preventDefault();
        tpj(this).siblings(".fancybox").trigger("click");
    }); // on
});

See JSFIDDLE

Fancybox does not work when thumbnails contain an overlay div

1 Answers