Загрузка содержимого с помощью FancyBox

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

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

у вас есть связь с hrefn к некоторому контенту #id.

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

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

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

тогда вы просто запустите Fancybox через a 1-вкладыш.

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

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

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

3 67
html css jquery fancybox

3 ответа:

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

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

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

вуаля!

121

Как я понял это происходит на примере индекса.стиль HTML.CSS, который поставляется в комплекте с установкой Fancybox.

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

чтобы получить встроенный Fancybox работает, вам нужно будет иметь этот код присутствует в вашем индексе.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> 

</body>

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

7

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

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

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

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

1