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

Question

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

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

17 94

jquery jquery-plugins fancybox

17 ответов:

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

$(document).ready(function () {
        $.fancybox({
            'width': '40%',
            'height': '40%',
            'autoScale': true,
            'transitionIn': 'fade',
            'transitionOut': 'fade',
            'type': 'iframe',
            'href': 'http://www.example.com'
        });
});

65

все просто:

сделайте свой элемент скрытым сначала так:
<div id="hidden" style="display:none;">
    Hi this is hidden
</div>
затем вызовите свой javascript:
<script type="text/javascript">
    $(document).ready(function() {
        $.fancybox("#hidden");
    });
</script>
Проверьте изображение ниже:

еще пример:
<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>

11

10

или используйте это в файле JS после настройки вашего fancybox:
$('#link_id').trigger('click');
Я считаю, что Fancybox 1.2.1 будет использовать параметры по умолчанию в противном случае из моего тестирования, когда мне нужно было это сделать.

8

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

$("#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

6

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

<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>

5

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

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>

4

ответ Алекса велик. но важно отметить, что это вызывает стиль 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');
});

3

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

во-первых, добавьте событие live click на ваш будущий динамический якорь:
$('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 должен появляется onload!

HTH

2

может быть, это поможет... это было использовано в полноразмерном событии щелчка календаря jQuery (http://arshaw.com/fullcalendar/) ... но его можно использовать более широко для работы с fancybox, запускаемым jQuery.
  eventClick: function(calEvent, jsEvent, view) {
      jQuery("body").after('<a id="link_'+calEvent.url+'" style="display: hidden;" href="http://thisweekinblackness.com/wp-content/uploads/2009/01/steve-urkel.jpg">Steve</a>');
      jQuery('#link_'+calEvent.url).fancybox(); 
      jQuery('#link_'+calEvent.url).click();
      jQuery('#link_'+calEvent.url).remove();
    return false;
  }

1

вы также можете использовать собственную функцию JavaScript setTimeout() для задержки отображения коробки после того, как DOM готов.

<a id="reference-first" href="#reference-first-message">Test the Popup</a>

<div style="display: none;">
    <div id="reference-first-message" style="width:400px;height:100px;overflow:auto;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum, vehicula non pretium varius, cursus ac tortor. Vivamus fringilla congue laoreet. Quisque ultrices sodales orci, quis rhoncus justo auctor in. Phasellus dui eros, bibendum eu feugiat ornare, faucibus eu mi. Nunc aliquet tempus sem, id aliquam diam varius ac. Maecenas nisl nunc, molestie vitae eleifend vel, iaculis sed magna. Aenean tempus lacus vitae orci posuere porttitor eget non felis. Donec lectus elit, aliquam nec eleifend sit amet, vestibulum sed nunc.
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $("#reference-first").fancybox({
            'titlePosition'         : 'inside',
            'transitionIn'          : 'fade',
            'transitionOut'         : 'fade',
            'overlayColor'          : '#333',
            'overlayOpacity'        : 0.9
        }).trigger("click");

        //launch on load after 5 second delay
        window.setTimeout('$("#reference-first")', 5000);
    });
</script>

1

в случае если у вас нет кнопки, Чтобы нажать. Я имею в виду, если вы хотите открыть его на AJAX ответ, то это будет выглядеть так :
$.fancybox({
      href: '#ID',
      padding   : 23,
      maxWidth  : 690,
      maxHeight : 345
});

1

$(document).ready(function() {
    $.fancybox(
      '<p>Yes. It works <p>',
       {
        'autoDimensions'    : false,
        'width'             : 400,
        'height'            : 200,
        'transitionIn'      : 'none',
        'transitionOut'     : 'none'
       }
    );
});

Это поможет..

1

может быть, вы можете использовать jqmodal,Это легкий и простой в использовании. вы можете показать модальное поле, позвонив
$('.box').jqmShow() 

0

вы можете поставить ссылку (она будет скрыта. Может быть раньше </body>)
<a id="clickbanner" href="image.jpg" rel="gallery"></a>
и работает rel атрибут или класс, как это
$(document).ready(function() {
    $("a[rel=gallery]").fancybox({
        openEffect  : 'elastic',
        closeEffect : 'elastic',
        maxWidth    : 800,
        maxHeight   : 600
    });
});
просто сделайте это с помощью функции триггера jquery
$( window ).load(function() {
  $("#clickbanner").trigger('click');
});

0

HTML:

<a id="hidden_link" href="LinkToImage"></a>

JS:

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

0

Blegger · Accepted Answer · 2016-01-20 17:13:04

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

этот пример сценария встроен непосредственно в HTML, но он также может быть включен в файл JS.
<script type="text/javascript">
    $(document).ready(function() {
        $("#hidden_link").fancybox().trigger('click');
    });
</script>