FancyBox возвращает "Запрошенный контент не может быть загружен. Повторите попытку позже". со ссылкой

Ответ 1

У вашего подхода много проблем:

Первым не помните, что fancybox получает свое содержимое от атрибута href любого связанного с ним селектора, поэтому ссылка

<a class="fancybox" href="{target}" ...

должен быть привязан к fancybox через следующий script, чтобы работать

$('.fancybox').fancybox();

Довольно очевидно, но в вашем подходе ссылка внутри открытого fancybox (который, к примеру, нацелен на yahoo) не привязан к самому fancybox; он попытается снова запустить Fancybox, но без указания того, какой контент должен быть на этот раз, следовательно, ошибка "Запрошенный контент не может быть загружен. Повторите попытку позже". другими словами, ссылка (внутри встроенного контента) <a href="http://yahoo.com" ... не привязана к fancybox.

Единственный способ, которым ссылки внутри fancybox могут работать и загружать контент динамически (без привязки к fancybox), это когда текущий контент является внешним документом html, а fancybox type - iframe (не ваш случай )

Второй, вы открыли изображение, поэтому fancybox установил type в image по умолчанию, но затем вы притворяетесь, что загружаете другой тип контента в одном и том же поле (например, yahoo), для чего требуется установить type в iframe и другие параметры, такие как width и height.

Третий, поскольку вы используете встроенный контент, обратите внимание на существующую ошибку в v1.3.x и ее обходное решение, чтобы избежать дальнейших проблем, вы можете узнать подробнее здесь

Last, я не просто лекции здесь, это больше похоже на объяснение того, что происходит с вашей проблемой.... но хорошая новость в том, что вам просто нужно добавить еще несколько строк кода, чтобы он работал так, как вы хотите:

1: вам нужно создать fancybox script для каждого типа контента, который вы хотите открыть во второй раз (дополнительно к существующему), поэтому в вашем примере вы хотите щелкнуть изображение внутри fancybox и открыть его yahoo... затем создайте этот script

$('.fancyframe').fancybox({
 'type':'iframe',
 'width': 600, //or whatever you want
 'height': 300
});

2: внутри вашего скрытого встроенного контента установите этот класс в ссылку, чтобы этот код:

<div style="display: none;">
 <div id="hover-image_0">
  <a href="http://www.yahoo.com"><img src="1_b.jpg" class="img" /></a>
 </div>
</div>

теперь должно выглядеть как

<div style="display: none;">
 <div id="hover-image_0">
  <a class="fancyframe" href="http://www.yahoo.com"><img src="1_b.jpg" class="img" /></a>
 </div>
</div>

Сделайте то же самое для каждого скрытого встроенного контента. Если вы хотите открыть другой тип контента в fancybox, просто создайте script соответственно. Остальная часть вашего кода в порядке (не мешает мне запускать fancybox при наведении)

БОКОВЫЕ ПРИМЕЧАНИЯ: сайты, такие как google, yahoo, jquery и некоторые другие, не будут открываться в fancybox. Также убедитесь, что у вас есть правильный DOCTYPE для правильной работы fancybox (на вашей образцовой странице нет). См. Невозможно загрузить Google в iframe в fancybox для объяснения.

Ответ 2

Я думаю, что я понял, что вызывает эту проблему, по крайней мере для меня.

Проблема возникает, если у вас есть класс на одном из ваших элементов, который совпадает с классом popup.

Например:

<a class="popup" href="#">Open the popup</a>

И у вас есть что-то в своем всплывающем окне с тем же именем класса, например:

<div class="popup">some text</div>

Вы получите сообщение об ошибке. Попробуйте изменить класс div на что-то вроде popup-window - это должно исправить вашу ошибку

В вашей странице примера это работает для меня, если я не нажимаю. Когда вы нажимаете, на какой странице вы должны быть приняты? Вы хотите, чтобы он просто перешел к следующему изображению?

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

Получается ли та же ошибка, когда вы используете только те функции, которые обычно применяются?

Если вы хотите, попробуйте дать каждому изображению экземпляр имени галереи так: rel="gallery" и посмотреть, что произойдет. Вы должны получить следующие/предыдущие стрелки, показывающие и работающие так, как вы ожидали.

Но, честно говоря, я бы полностью избавился от функциональности зависания. Или, по крайней мере, избавиться от mouseout() Это, вероятно, самая назойливая часть.

Просто используйте это, чтобы вызвать действия fancybox:

$("a[rel=gallery]").fancybox();

Таким образом, вы можете избавиться от всех тех классов, которые, вероятно, вызывают проблемы.

Я надеюсь, что это поможет.

Ответ 3

Я просто столкнулся с этой проблемой.

Как выясняется, href url EXTRA чувствителен к регистру. (если это возможно)

Независимо двойная, тройная проверка ваших URL-адресов href, чтобы убедиться, что у вас есть вопрос точно.

Ответ 4

Мое решение было:

    <script type="text/javascript">
    jQuery(document).ready(function() {

        $(".fancybox").click(function() {
            $.fancybox({
                'padding'       : 0,
                'autoScale'     : false,
                'transitionIn'  : 'none',
                'titleShow'     : false,
                'showCloseButton': true,
                'titlePosition' : 'inside',
                'transitionOut' : 'none',
                'title'         : '',
                'width'         : 640,
                'height'        : 385,
                'href'          : this.href,
                'type'          : 'iframe',
                'helpers'     : { 
                                'overlay' : {'closeClick': false}
                                }

            });

            return false;
        });
    });
    </script>

Ответ 5

Если некоторые из изображений отображаются, а другие - нет, хотя разметка идентична, тогда проверьте это:

• Попробуйте ввести все буквы в имени файла и в html. Fancybox, кажется, чувствителен к регистру.
• Проверьте, разрешено ли разрешению все изображения. Я заметил, что мои фотографии не работают должным образом на мобильных устройствах, потому что на моем компьютере все разрешения были установлены на "без разрешения". Я изменил это на "только для чтения", и он работал как шарм!

Ответ 6

Я только что повторно создал свой тест на своей локальной машине, и он отлично работает для меня (я запустил это из демонстрационной папки установки FancyBox):

<html>
<head>
<title>jQuery Fancybox Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="../source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css" media="screen" />
</head>
<body>
<script type="text/javascript">
    $(document).ready(function () {
        $(".fancybox").fancybox().hover(function () {
            $(this).click();
        });
        $("#fancybox-outer").fancybox().mouseleave(function () {
            $("#fancybox-overlay").click();
        }); 
    }); 
</script>
    <li class="fancybox-outer"><a id="inline" href="#hover-image_0" class="fancybox">
        <img src="1_s.jpg" style="margin-top: 32px" />
    </a>
        <p>
            <a href="http://www.yahoo.com">Go to Yahoo</a></p>
        <div style="display: none;">
            <div id="hover-image_0">
                <a href="http://www.yahoo.com">
                    <img src="1_b.jpg" class="img" />
                </a>
            </div>
        </div>
    </li>
    <li class="fancybox-outer"><a id="inline" href="#hover-image_1" class="fancybox">
        <img src="2_s.jpg" style="margin-top: 32px" />
    </a>
        <p>
            <a href="http://www.google.com">Go to Google</a></p>
        <div style="display: none;">
            <div id="hover-image_1">
                <a href="http://www.google.com">
                    <img src="2_b.jpg" class="img" /></a></div>
        </div>
    </li>
</body>
</html>

Ответ 7

У меня такая же проблема с Fancybox. Вы не можете иметь пробелы или специальный символ в href и div id. Используйте URL-адрес, если вы используете названия страниц.

Ответ 8

Я проверял все возможности и столкнулся с проблемой чувствительности к EXTRA, как упоминал @BrettBumeter. Фактически, это "очень чувствительный к регистру", мне пришлось перерисовать путь URL (href) к моим изображениям с *.jpg до *.JPG(или независимо от вашего расширения типа файла). Изменив это, я решил проблему.

Ответ 9

Не применяйте класс fancybox к вашему элементу LI, делайте это с вашим элементом A.

Ответ 10

I, после принятия вышеуказанного совета, изменил ".png" на ".PNG" в href. Обратите внимание, что имена файлов являются расширением нижнего регистра, но он работает только с расширением верхнего регистра в href (остальное имя файла)

Надеюсь, что это поможет.