Проблема с Fancybox. Iframe работает только для первой ссылки на сайте

#javascript #jquery #fancybox

Вопрос:

Я тестирую Fancybox для Iframes и я заметил, что в моем блоге WordPress (и, я думаю, везде еще) iframe открывается только для первой ссылки на моей домашней странице. Однако я добавил атрибут id ко всем ссылкам.

Есть идеи, почему это так и как это исправить? Ниже приведен код. Я только изменил название на popup и установил для всех ссылок id =»popup». На странице примеров он также использует id, но только для одной ссылки.

 <script type="text/javascript">
    $(document).ready(function() {
        $("#popup").fancybox({
            'width'             : '75%',
            'height'            : '75%',
            'autoScale'         : false,
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'type'              : 'iframe'
        });
    });
</script>

1. 1-й добавьте немного кода 2-й я думаю, это должен быть класс с таким же именем, а не ID! ИДЕНТИФИКАТОР должен быть уникальным, поэтому попробуйте изменить идентификатор в class, а затем измените селектор fancy box

2. @Itroubs Привет, я обновил вопрос, но то, что я сделал, взято именно из их документации.

Ответ №1:

Идентификаторы должны быть уникальными. Если ваш существующий код представляет собой что-то вроде

 <a href="whatever" id="popup">Link 1</a>
<a href="whateverelse" id="popup">Link 2</a>

Измените ее на

 <a href="whatever" class="popup">Link 1</a>
<a href="whateverelse" class="popup">Link 2</a>

Затем настройте свой Javascript так, чтобы

 <script type="text/javascript">
    $(document).ready(function() {
        $("a.popup").fancybox({
            'width'             : '75%',
            'height'            : '75%',
            'autoScale'         : false,
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'type'              : 'iframe'
        });
    });
</script>

Причина, по которой использование кода из их документации у вас не работает, заключается в том, что их документация имеет дело только с одной ссылкой, а не с группой ссылок.

Ответ №2:

что вы там делаете, так это добавляете один fancybox к одному объекту с всплывающим идентификатором. если вы хотите, чтобы у нескольких <a> тегов был свой собственный fancybox, вам нужно либо сделать то, что вы сделали для тега efery с другим идентификатором, либо предоставить им один и тот же класс с другим «rel».

смотрите этот пример