Встроенное изображение Fancybox с внешней ссылкой - PullRequest
Новая
       6

Встроенное изображение Fancybox с внешней ссылкой

0 голосов
/ 04 декабря 2018

Я использую Fancybox 3, Cookie и показываю скрытый контент после загрузки страницы.

Скрытый контент имеет изображение и внешнюю ссылку.

Я борюсь свнешняя ссылка.

Это мой пример кода:

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>

После загрузки страницы Fancybox инициализирует скрытое содержимое и показывает изображение.Курсор появляется, но изображение не кликабельно, поэтому URL не работает.

В чем может быть проблема?

1 Ответ

0 голосов
/ 04 декабря 2018

Во-первых, почему вы пишете такой код?- 

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

Это совершенно неправильно!Что здесь происходит - вы присоединяете событие клика (которое запускает fancybox) к своему элементу, а затем немедленно запускаете его.

Если вы хотите немедленно запустить fancybox, следуйте документации и используйте его следующим образом: 

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

И все должно работать нормально.

...