Як запустити jQuery Fancybox при завантаженні сторінки?

95

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

jquery jquery-plugins fancybox

— Блеггер
джерело

Якщо ви зайдете на офіційний веб-сайт fancybox ( fancybox.net ), у них з’явиться автоматичне спливаюче вікно, тож ви можете перевірити джерело їх сторінки, щоб побачити, як вони це зробили (підказка: не те саме, що прийнята відповідь)

— Nippysaurus

15

Щоб заощадити трохи часу для інших - $ (function () {$ .fancybox ('<div> Змінити мене </div>', {padding: 20});});

— nikib3ro 03.03.12

162

На даний момент Fancybox прямо не підтримує спосіб автоматичного запуску. Навколо того, що мені вдалося заробити, було створення прихованого прив'язувального тегу та ініціювання його події натискання. Переконайтеся, що ваш дзвінок для активації клікової події включений після включення файлів JS jQuery та Fancybox. Код, який я використав, такий:

Цей зразок сценарію вбудований безпосередньо в HTML, але він також може бути включений у файл JS.

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

— Блеггер
джерело

1

просто FYI $ (документ) .ready (function () {$ ("# hidden_link"). fancybox (). trigger ('click');}); те саме, що: function LaunchFancyBox () {$ ("# hidden_link"). fancybox (). trigger ('click'); } $ (документ) .ready (LaunchFancyBox ());

— Марк Шультгайс

4

Це те саме, що $(document).ready(LaunchFancyBox());повинно бути $(document).ready(LaunchFancyBox);. (зверніть увагу на відсутність виклику функції в кінці).

— Адам Лютер

Я справді спробував це, але безуспішно. Мені довелося завантажити вміст через Ajax, тоді я зателефоную $ $fancybox ({... передача вмісту.

— giubueno

@Blegger Ваше рішення $ ("# hidden_link"). Fancybox (). Trigger ('click'); працює ідеально для мене.

— Мукеш

66

Я змусив це працювати, викликавши цю функцію в документі готовий:

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

— ЙорданіяC
джерело

Це не спрацювало для мене, оскільки щось не вдається з обробкою параметра href. Анімація "чекай" показується назавжди.

— Борис ван Шотен,

3

Варто зазначити, що це, здається, метод, який розробляють самі Fancybox. Якщо ви перейдете на веб-сайт fancybox ( fancybox.net ), ви побачите модальне діалогове вікно, яке повідомляє, що "fancybox2 випущено!" ... якщо ви подивитесь на джерело цієї сторінки, то побачите, що вони використовували техніку, описану у цій відповіді.

— Nippysaurus

Це має бути прийнятою відповіддю! Прийняте рішення працює, але додавання прихованого якоря, над яким ви запускаєте подію клацання, насправді не є найчистішим, чи не так?

— luigi7up

Погоджено, використання прихованого посилання - хакерство. Робіть правильно.

— Jamsi

Дуже просто! Дякую! У мене вбудований YouTube автовідтворення. Чи є спосіб закрити de lightbox, як тільки відео закінчиться?

— Антоніо Алмейда

12

Це просто:

Спочатку зробіть свій елемент прихованим:

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

введіть тут опис зображення

— Гішам Мунір
джерело

10

Window.load (на відміну від document.ready ()), схоже, є фокусом, який використовується в демонстраційних версіях JSFiddler для завантаження Fancybox 2.0 :

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

Маючи на увазі, що ви можете використовувати document.ready () в іншому місці, і IE9 засмучується порядком завантаження цих двох. У вас залишаються два варіанти: змінити все на window.load або використовувати setTimer ().

— Кріс С
джерело

Ця відповідь працює для мене краще, коли я хочу, щоб сторінка починалася із спливаючого попередження, схожого на ios, а потім могла її закрити. Найпопулярніша відповідь, коли я намагався її реалізувати, зробив це так завжди, коли я натискав fancybox.close, елемент перезавантажиться, а не піде. Дякую!

— Натаніель Флік

Ваша відповідь, сер, є найбільш доречною і на 100% правильною. Дякую.

— Шалк Кеун

8

Або використовуйте це у файлі JS після налаштування вашого fancybox:

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

Я вважаю, що Fancybox 1.2.1 буде використовувати параметри за замовчуванням, інакше як під час мого тестування, коли мені потрібно було це зробити.

— cynge13
джерело

5

чому це ще не одна з відповідей ?:

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

— Томас
джерело

5

Найкращий спосіб, який я знайшов, це:

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

— арена-ру
джерело

Це не вдасться, оскільки коментована заключна дужка параметрів.

— Teekin

¡Чисто та легко! Працює ідеально. Дякую!

— Кароліна

4

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

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>

— CMen
джерело

3

Відповідь Алекса чудова. але важливо зазначити, що це викликає стиль фантазії за замовчуванням. Якщо у вас є власні власні правила, вам слід просто зателефонувати .trigger і натиснути на цей конкретний прив’язок

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

Насправді мені вдалося запустити посилання 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 повинен з’явитися при завантаженні!

HTH

— Капсула
джерело

1

Можливо, це допоможе ... це було використано в повнорозмірній події натискання календаря 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'
       }
    );
});

Це допоможе ..

— Прабгагаран
джерело

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>

— АнасСафі
джерело

1

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

— Nic3500

-1

можливо, ви можете використовувати jqmodal , він легкий і простий у використанні. ви можете показати модальний ящик, зателефонувавши

$('.box').jqmShow()

— кульгавий
джерело

Я не думаю, що це працює, бо це не клас FancyBox

— Хосе Базіліо

1

Мої дизайнери хочуть зовнішнього вигляду Fancybox, і я волів би не витрачати зусиль, намагаючись застосувати його для jqmodal. Крім того, ми вже використовуємо Fancybox на сайті, і я не хочу підтримувати дві різні індикації лайтбоксу.

— Blegger