В чем причина ошибки с fancyBox?

162

27 мая 2018, 02:30

При расположении нескольких идентичных ссылок на странице перестает корректно работать открытие PopUp с инлайн-контентом: появляется на секунду и исчезает, причем, остается затемненный фон.

Если ссылка одна, то все ок. Ссылка:

<a data-fancybox="forms" data-src="#order-popup" href="javascript:;"></a>

Инициализация:

 $('[data-fancybox="forms"]').fancybox({
        infobar: false,
        touch: {
            vertical: false, 
            momentum: false
        }
    });

Скрытый блок:

<div class="order-popup hide" id="order-popup">Содержимое</div>

При расположении нескольких ссылок в адресной строке уже не site.ru/#forms, а site.ru/#forms-1 site.ru/#forms-2 и т.д.

Answer 1

Из оф источника, имена класов надо чтоб были прикручены, только так он их групирует вместе... Вот держите пример.

If you want to use the same script for all your images/elements then use classes instead.

 $(document).ready(function() { 
	/* Apply fancybox to multiple items */ 
	$('.grouped_elements').fancybox({ 
		'transitionIn'	:	'elastic', 
		'transitionOut'	:	'elastic', 
		'speedIn'		:	600,  
		'speedOut'		:	200,  
		'overlayShow'	:	false 
	}); 
	 
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.js"></script> 
 
<a class="grouped_elements" rel="group1" href="http://expres.ua/gfx/news/gugl_10.png">1</a> 
<a class="grouped_elements" rel="group1" href="http://expres.ua/gfx/news/gugl_10.png">1</a> 
<a class="grouped_elements" rel="group1" href="http://expres.ua/gfx/news/gugl_10.png">1</a> 
<a class="grouped_elements" rel="group1" href="http://expres.ua/gfx/news/gugl_10.png">1</a> 
 
<div class="order-popup hide" id="order-popup">Содержимое</div>