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

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

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

У вас есть связь с href п до некоторого содержания #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*

источник

2010-10-18 Marko

121

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

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

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

Вуаля

источник

2010-10-18 20:59:41 Marko

Это очень пример рассматривается на сайте FancyBox - посмотрите на примере 5 http://fancybox.net/blog –

@Bobby Джек - Да, но они не» t сделать это очень очевидным. Если вы посмотрите вокруг Интернета, у многих людей была такая же проблема, как и я - так что, надеюсь, это поможет кому-то. – Marko

это помогло мне чувак .. я тоже собирался ... спасибо за то, что делился – mysterious

Я потратил много времени, пытаясь понять это и как я шел через пример 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>

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

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

источник

2011-09-22 23:15:11 tandy

Только что-то я нашел для пользователей Wordpress,

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

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

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

источник

2012-11-02 21:59:12

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

ответ

Смежные вопросы