Как запустить jQuery Fancybox при загрузке страницы? - PullRequest
Новая
       87

Как запустить jQuery Fancybox при загрузке страницы?

94 голосов
/ 30 апреля 2009

Я хотел бы запустить Fancybox (например, версия Fancybox модального или лайтбокса) при загрузке страницы. Я мог бы привязать его к скрытому тегу привязки и запустить событие click этого тега привязки через JavaScript, но я бы предпочел просто запустить Fancybox напрямую и избежать использования дополнительного тега привязки.

Ответы [ 17 ]

160 голосов
/ 04 мая 2009

Fancybox в настоящее время напрямую не поддерживает способ автоматического запуска. Обходной путь, который я смог получить, - это создание скрытого тега привязки и запуск его события щелчка. Убедитесь, что ваш вызов для запуска события click включен после того, как включены файлы jQuery и Fancybox JS. Код, который я использовал, выглядит следующим образом:

Этот пример сценария встроен непосредственно в HTML, но его также можно включить в файл JS. 

<script type="text/javascript">
    $(document).ready(function() {
        $("#hidden_link").fancybox().trigger('click');
    });
</script>
65 голосов
/ 06 сентября 2010

Я получил это на работу, вызвав эту функцию в готовом документе: 

$(document).ready(function () {
        $.fancybox({
            'width': '40%',
            'height': '40%',
            'autoScale': true,
            'transitionIn': 'fade',
            'transitionOut': 'fade',
            'type': 'iframe',
            'href': 'http://www.example.com'
        });
});
11 голосов
/ 29 марта 2014

Это просто:

Сначала сделайте свой элемент скрытым так: 

<div id="hidden" style="display:none;">
    Hi this is hidden
</div>

Тогда назовите свой javascript: 

<script type="text/javascript">
    $(document).ready(function() {
        $.fancybox("#hidden");
    });
</script>

Проверьте изображение ниже:

enter image description here

Другой пример: 

<div id="example2" style="display:none;">
        <img src="http://theinstitute.ieee.org/img/07tiProductsandServicesiStockphoto-1311258460873.jpg" />
    </div>

 <script type="text/javascript">
        $(document).ready(function() {
            $.fancybox("#example2");
        });
    </script>

enter image description here

10 голосов
/ 22 августа 2012

Window.load (в отличие от document.ready ()), похоже, уловка, используемая в демо-версиях JSFiddler Fancybox 2.0 : 

$(window).load(function()
{
    $.fancybox("test");
});

Имейте в виду, что вы можете использовать document.ready () в другом месте, и IE9 расстраивается из-за порядка загрузки двух. Это оставляет вам две возможности: изменить все на window.load или использовать setTimer ().

8 голосов
/ 28 мая 2009

Или используйте это в файле JS после того, как ваш fancybox настроен: 

$('#link_id').trigger('click');

Я считаю, что Fancybox 1.2.1 будет использовать параметры по умолчанию, в отличие от моего тестирования, когда мне нужно было это сделать.

6 голосов
/ 28 февраля 2011

почему это еще не один из ответов?: 

$("#manual2").click(function() {
    $.fancybox([
        'http://farm5.static.flickr.com/4044/4286199901_33844563eb.jpg',
        'http://farm3.static.flickr.com/2687/4220681515_cc4f42d6b9.jpg',
        {
            'href'  : 'http://farm5.static.flickr.com/4005/4213562882_851e92f326.jpg',
            'title' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
        }
    ], {
        'padding'           : 0,
        'transitionIn'      : 'none',
        'transitionOut'     : 'none',
        'type'              : 'image',
        'changeFade'        : 0
    });
});

теперь просто активируйте ссылку !!

получил это с Fancybox homepage

5 голосов
/ 30 марта 2011

Лучший способ, который я нашел, это: 

<script type="text/javascript">
    $(document).ready(function() {
        $.fancybox(
             $("#WRAPPER_FOR_hidden_div_with_content_to_show").html(), //fancybox works perfect with hidden divs
             {
                  //fancybox options
             }
        );
    });
</script>
4 голосов
/ 16 сентября 2010

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

JQuery: 1.4.2

Fancybox: 1.3.1 

<body onload="$('#aLink').trigger('click');">
<a id="aLink" href="http://www.google.com" >Link</a></body>

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

        $("#aLink").fancybox({
            'width'             : '75%',
            'height'            : '75%',
            'autoScale'         : false,
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'type'              : 'iframe'
        });
    });
</script>
3 голосов
/ 11 ноября 2010

Алекс ответит отлично. но важно отметить, что это вызывает стиль fancybox по умолчанию. Если у вас есть свои собственные правила, вам нужно просто позвонить 

$(document).ready(function() {
$("#hidden_link").fancybox({ 
    'padding':          0,
    'cyclic':       true,
    'width':        625,
    'height':       350,
    'padding':      0, 
    'margin':      0, 
    'speedIn':      300,
    'speedOut':     300,
    'transitionIn': 'elastic',
    'transitionOut': 'elastic',
    'easingIn':     'swing',
    'easingOut':    'swing',
    'titleShow' : false
}); 
    $("#hidden_link").trigger('click');
});
2 голосов
/ 14 октября 2009

Мне действительно удалось запустить ссылку fancyBox только из внешнего файла JS, используя событие "live":

Сначала добавьте событие живого клика на будущий динамический якорь: 

$('a.pub').live('click', function() {
  $(this).fancybox(... fancybox parameters ...);
})

Затем добавьте привязку к телу: 

$('body').append('<a class="iframe pub" href="your-url.html"></a>');

Затем запустите fancyBox, "щелкнув" на якоре: 

$('a.pub').click();

Ссылка fancyBox теперь «почти» готова. Почему "почти"? Потому что, похоже, вам нужно добавить некоторую задержку, прежде чем запускать второй щелчок, иначе скрипт не готов.

Это быстрая и грязная задержка с использованием некоторой анимации на нашем якоре, но она работает хорошо: 

$('a.pub').slideDown('fast', function() {
  $('a.pub').click();
});

Итак, ваш fancyBox должен появиться при загрузке!

НТН

Страница:
...