Хорошо, я просто пишу это сообщение, надеюсь, поможет другим, которые могут столкнуться с одной и той же проблемой.
Примеры на веб-сайте поставщика немного расплывчаты, и я принял следующий сценарий.
У вас есть ссылка с 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*
Решение очень простое, но мне понадобилось около 2 часов и половина волос на голове, чтобы найти его.
Просто заверните ваш контент с (избыточным) div с display: none и Bob - ваш дядя.
<div style="display: none">
<div id="content-div">Some content here</div>
</div>
Voila
Я потратил много времени, пытаясь понять это, и то, как я это делал, проходило через пример 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; они должны соответствовать.
Надеюсь, это поможет.
Просто что-то я нашел для пользователей Wordpress,
Как очевидно, если ваш div возвращает некоторый контент AJAX на основе заголовка, который обычно связывается с новой почтовой страницей, некоторые учебники скажут, что возвращают false, так как вы возвращаете данные сообщения на одна и та же страница, и возврат будет препятствовать перемещению страницы. Однако, если вы вернете false, вы также не позволяете Fancybox2 делать это. Я потратил часы, пытаясь понять эту тупую простую вещь.
Итак, для этих типов ссылок просто убедитесь, что свойство href - это хешированный (#) div, который вы хотите выбрать, и в вашем javascript убедитесь, что вы не возвращаете false, поскольку вам больше не понадобится.
Просто я знаю ^ _ ^