Загрузка встроенного контента с использованием FancyBox

Хорошо, я просто пишу это сообщение, надеюсь, поможет другим, которые могут столкнуться с одной и той же проблемой.

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

У вас есть ссылка с href n на некоторый контент #id.

<a href="#content-div" class="fancybox">Open Example</a>

И у вас есть div для хранения этого контента.

<div id="content-div" style="display: none">Some content here</div>

Затем вы просто запускаете Fancybox через 1-лайнер.

$(".fancybox").fancybox();

Естественно, вы думаете, что Fancybox скопирует контент и изменит display: none на display: block, и все будет в порядке.

Но этого не происходит.
Он по-прежнему загружает контент, но контент скрыт, и у вас есть пустой Fancybox. *cry*

Ответ 1

Решение очень простое, но мне понадобилось около 2 часов и половина волос на голове, чтобы найти его.

Просто заверните ваш контент с (избыточным) div с display: none и Bob - ваш дядя.

<div style="display: none">
    <div id="content-div">Some content here</div>
</div>

Voila

Ответ 2

Я потратил много времени, пытаясь понять это, и то, как я это делал, проходило через пример index.html/style.css, который поставляется в комплекте с установкой Fancybox.

Если вы просматриваете код, который используется для демонстрационного веб-сайта и в основном копируете/вставляете, все будет в порядке.

Чтобы получить встроенный Fancybox, вам нужно будет иметь этот код в файле index.html:

  <head>
    <link href="./fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" media="screen" />
    <script>!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');</script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {

    $("#various1").fancybox({
            'titlePosition'     : 'inside',
            'transitionIn'      : 'none',
            'transitionOut'     : 'none'
        });
    });
    </script>
  </head>

 <body>

    <a id="various1" href="#inline1" title="Put a title here">Name of Link Here</a>
    <div style="display: none;">
        <div id="inline1" style="width:400px;height:100px;overflow:auto;">
                   Write whatever text you want right here!!
        </div>
    </div>

Не забудьте указать, в каких папках находятся ваши файлы script и где вы указываете в теге Head; они должны соответствовать.

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

Ответ 3

Просто что-то я нашел для пользователей Wordpress,

Как очевидно, если ваш div возвращает некоторый контент AJAX на основе заголовка, который обычно связывается с новой почтовой страницей, некоторые учебники скажут, что возвращают false, так как вы возвращаете данные сообщения на одна и та же страница, и возврат будет препятствовать перемещению страницы. Однако, если вы вернете false, вы также не позволяете Fancybox2 делать это. Я потратил часы, пытаясь понять эту тупую простую вещь.

Итак, для этих типов ссылок просто убедитесь, что свойство href - это хешированный (#) div, который вы хотите выбрать, и в вашем javascript убедитесь, что вы не возвращаете false, поскольку вам больше не понадобится.

Просто я знаю ^ _ ^