Я хотел бы запустить Fancybox (например, Fancybox's вариант модального или светлого блока) при загрузке страницы. Я мог бы привязать его к скрытому тегу привязки и запустить событие click этого тега привязки с помощью JavaScript, но я предпочел бы просто запустить Fancybox напрямую и избежать лишнего тега привязки.Как запустить jQuery Fancybox при загрузке страницы?
В настоящее время Fancybox напрямую не поддерживает способ автоматического запуска. Работа, с которой я смог работать, - создать скрытый тег привязки и запустить его событие click. Убедитесь, что ваш вызов для запуска события клика включен после включения jQuery и файлов Fancybox JS. Используемый мной код выглядит следующим образом:
Этот образец скрипта встроен непосредственно в HTML, но он также может быть включен в файл JS.
<script type="text/javascript">
$(document).ready(function() {
$("#hidden_link").fancybox().trigger('click');
});
</script>
только FYI $ (document) .ready (function() {$ ("# hidden_link"). Fancybox(). Trigger ('click');}); - это то же самое, что и: функция LaunchFancyBox() { $ ("# hidden_link"). Fancybox(). Trigger ('click'); } $ (document) .ready (LaunchFancyBox()); –
То же, что и '$ (document) .ready (LaunchFancyBox());' должен быть '$ (document) .ready (LaunchFancyBox);'. (обратите внимание на отсутствие вызова функции в конце). –
Я пробовал это, но безуспешно. Мне пришлось загружать контент через Ajax, тогда я вызываю $ .fancybox ({... передача содержимого. – giubueno
Возможно, вы можете использовать jqmodal, это легкий и простой в использовании. вы можете показать коробку модальных данных, позвонив по телефону
$('.box').jqmShow()
Я не думаю, что это работает, потому что это не класс FancyBox –
Мои дизайнеры хотят выглядеть и чувствовать себя в Fancybox, и я бы предпочел не пытаться реализовать его для jqmodal. Плюс мы уже используем Fancybox на сайте, и я не хочу поддерживать две разные приемы световых коробок. – Blegger
Или использовать это в файле JS после вашего FancyBox устанавливается:
$('#link_id').trigger('click');
Я считаю, что FancyBox 1.2.1 будет использовать параметры по умолчанию в противном случае из моего тестирования, когда мне нужно, чтобы сделать это.
Я на самом деле удалось вызвать ссылку FancyBox только из внешнего файла JS с помощью «живой» событие:
Во-первых, добавить событие живой щелчок на вашей будущей динамической анкера:
$('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!
НТН
Может быть, это поможет ... это было использовано в полном размере 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;
}
Я получил эту работу, вызвав эту функцию в документе готов:
$(document).ready(function() {
$.fancybox({
'width': '40%',
'height': '40%',
'autoScale': true,
'transitionIn': 'fade',
'transitionOut': 'fade',
'type': 'iframe',
'href': 'http://www.example.com'
});
});
Это не сработало для меня, потому что что-то не так с обработкой параметра href. Анимация «wait» отображается навсегда. –
Стоит отметить, что это, кажется, метод, который сам разработчик fancybox. на веб-сайте fancybox (http://fancybox.net) вы должны увидеть модальный диалог, в котором сообщается, что «fancybox2 выпущен!» ... если вы посмотрите на источник этой страницы, вы увидите, что они использовали описанную технику в этом ответе – Nippysaurus
Это должен быть принятый ответ! Принятое решение работает, но добавление скрытого якоря, над которым вы запускаете событие click, на самом деле не самый чистый, не так ли? – luigi7up
Для моего случая, следующее может успешно работать. Когда страница загружена, лайтбокс открывается сразу.
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>
ответ Алекс велик. но важно отметить, что это вызывает стиль fancybox по умолчанию. Если у вас есть свои собственные правила, вы должны просто позвонить .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');
});
почему бы не это один из ответов ?:
$("#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
Лучшим способа я нашел:
<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>
Вы также можете использовать встроенную функцию 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>
Window.load (в отличие от document.ready()), как представляется, Ве трюк используется в JSFiddler onload demos of Fancybox 2.0:
$(window).load(function()
{
$.fancybox("test");
});
Bare в виду, вы можете использовать document.ready() в другом месте, и IE9 расстраивается с порядком загрузки этих двух. Это дает вам два варианта: изменить все на window.load или использовать setTimer().
Этот ответ работает лучше для меня, когда я хочу, чтобы страница начиналась с напоминания, напоминающего ios, и затем можно закрыть его. Самый популярный ответ, когда я пытался его реализовать, делал это так, чтобы я когда-либо нажимал fancybox.close, элемент перезагружается, а не уходит. Благодаря! –
Ваш ответ сэр наиболее релевантный и 100% правильный. Благодарю. –
Вы можете поставить ссылку как это (она будет скрыта. Может быть, прежде чем </body>)
<a id="clickbanner" href="image.jpg" rel="gallery"></a>
И работая атрибут отн или класс, как этот
$(document).ready(function() {
$("a[rel=gallery]").fancybox({
openEffect : 'elastic',
closeEffect : 'elastic',
maxWidth : 800,
maxHeight : 600
});
});
Просто сделай это с функцией запуска JQuery
$(window).load(function() {
$("#clickbanner").trigger('click');
});
Его простой:
Сделать свой элемент скрыт первым, как это:
<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>
В случае, если у вас нет кнопки для доступа.Я имею в виду, если вы хотите, чтобы открыть его в ответ AJAX, то это будет выглядеть так:
$.fancybox({
href: '#ID',
padding : 23,
maxWidth : 690,
maxHeight : 345
});
$(document).ready(function() {
$.fancybox(
'<p>Yes. It works <p>',
{
'autoDimensions' : false,
'width' : 400,
'height' : 200,
'transitionIn' : 'none',
'transitionOut' : 'none'
}
);
});
Это поможет ..
Если зайти на официальный веб-сайт FancyBox (HTTP: // fancybox.net) у них есть автоматическое всплывающее окно, поэтому вы можете проверить их источник страницы, чтобы узнать, как они это сделали (подсказка: не то же самое, что и принятый ответ) – Nippysaurus
Чтобы сэкономить время для других - $ (function() { $ .fancybox ('