Image fails to open when targeting a class about bigpicture

[henrygd]

Hi Mike, would you mind posting the html that goes along with this? Just the container with the mybook id should be fine.

[macsupport]

Here is the basic html. I'm wondering if having some div's with id's within the main id might be the issue? I am also using lazysizes but it would not work when that was disabled either.

 <div id="mybook" data-intro="Notebook" data-position="right">	

<div class="keywords filters" >
 <span style="display:none;" class="keys">all </span>
</div>
</div>
<div id="item5" title="Drip" class="selectFav" >
<div class="sbp">
<button class="btn btn-link social fa fa-share-alt fa-2x"></button>
</div>
<h1>Drip</h1>
<img  class="thumbs lazyload" src="thumbs/Drop.jpg" alt="Drip" title="Drip" data-keyword="Green" width="340px" height="400px"/>
<div id="scroll5" class="nano"><div class="nano-content">
<p>A Drop of Water</p>
</div></div>

</div>

[macsupport]

Interesting that this works:

(function() {

    function setClickHandler(id, fn) {
      document.getElementById(id).onclick = fn;
    }

    setClickHandler('mybook', function(e) {
      var className = e.target.className;
      ~className.indexOf('thumbs') &&
        BigPicture({
        el: e.target,
        imgSrc: e.target.src.replace('thumbs', 'slides')
      });
    }); 
  })();

[henrygd]

Yep, the problem is that e.target.className === 'thumb' will not be true if the element also has other classes. Since the element also has the lazyload class, you end up testing if 'thumbs' is exactly equal to 'thumbs lazyload', which returns false, and BigPicture never gets called. ~className.indexOf('thumbs') will work because it does the same as className.indexOf('thumbs') > -1 -- tests if className contains the string 'thumbs' rather than test if it's equal. If you're using jQuery, another alternative would be $(e.target).hasClass('thumbs').

[macsupport]

Ahhh, thanks! I totally missed the === part as the cause.