Fancybox inline image with external link

Question

I'm using Fancybox 3, Cookie and I'm showing hidden content after the page loads.

The hidden content has an image and external link.

I'm struggling with the external link.

This is my example code:

HTML:

<div class="popup">
  <a href="https://google.com" target="_blank" >
    <img src="/uploads/my-image.jpg" />
  </a>
</div>

CSS:

.popup {
  display:none;
}

jQuery:

<script src="/js/cookie/js.cookie.js"></script>
<script>
  $(document).ready(function() {
    var check_cookie = Cookies.get('popup');
    var date = new Date();
    var minutes = 0.1;
    date.setTime(date.getTime() + (minutes * 60 * 1000));

    if(check_cookie == null) {
      Cookies.set('popup', 'value', { expires: date });

      $('.popup').fancybox({
        transitionEffect : "zoom-in-out",
      }).trigger('click');
    }
  });
</script>

After the page loads, Fancybox is initializing the hidden content and the image is showing. The cursor appears but the image is not clickable, so the URL is not working.

What could be the issue?

Answer 1

First, why would you write such code? -

$('.popup').fancybox({
      transitionEffect : "zoom-in-out",
}).trigger('click');

It is totally wrong! What is happening here - you attach click event (that starts fancybox) to your element, and then you immediately trigger it.

If you want to immediately start fancybox, then follow the docs and use it like this:

$.fancybox.open({
  src  : '.popup',
  type : 'inline',
  transitionEffect : 'zoom-in-out'
});

And it should work fine.