Как запустить jQuery Fancybox при загрузке страницы?
Я хотел бы запустить Fancybox (например,Fancybox это версия модального или светового ящика) при загрузке страницы. Я мог бы привязать его к скрытому тегу привязки и запустить событие click этого тега привязки через JavaScript, но я бы предпочел просто запустить Fancybox напрямую и избежать дополнительного тега привязки.
17 ответов
Fancybox в настоящее время не поддерживает способ автоматического запуска. Работа, которую я смог получить, - это создание скрытого тега привязки и запуск события click. Убедитесь, что ваш вызов для запуска события click включен после включения jQuery и fancybox JS-файлов. Код, который я использовал, выглядит следующим образом:
этот пример сценария встроен непосредственно в HTML, но он также может быть включен в JS-файл.
<script type="text/javascript">
$(document).ready(function() {
$("#hidden_link").fancybox().trigger('click');
});
</script>
Я получил это для работы, вызвав эту функцию в document ready:
$(document).ready(function () {
$.fancybox({
'width': '40%',
'height': '40%',
'autoScale': true,
'transitionIn': 'fade',
'transitionOut': 'fade',
'type': 'iframe',
'href': 'http://www.example.com'
});
});
все просто:
сделайте свой элемент скрытым сначала следующим образом:
<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>
или используйте это в файле JS после настройки fancybox:
$('#link_id').trigger('click');
Я считаю, что Fancybox 1.2.1 будет использовать параметры по умолчанию в противном случае из моего тестирования, когда мне нужно это сделать.
почему это не один из ответов?:
$("#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
лучший способ, который я нашел:
<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>
для моего случая может успешно работать следующее. Когда страница загружается, лайтбокс немедленно всплывает.
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>
ответ Алекса отличный. но это importanting отметить, что что называет стиль 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');
});
мне действительно удалось запустить ссылку 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
возможно, это поможет... это было использовано в событии щелчка календаря 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;
}
вы также можете использовать собственную функцию 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>
в случае если у вас нет кнопки, Чтобы нажать. Я имею в виду, если вы хотите открыть его в ответе 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'
}
);
});
Это поможет..
может быть, вы можете использовать jqmodal,Это легкий и простой в использовании. вы можете показать модальное поле, позвонив
$('.box').jqmShow()
вы можете поместить ссылку, как это (он будет скрыт. Может быть, раньше </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');
});
HTML-код:
<a id="hidden_link" href="LinkToImage"></a>
JS:
<script type="text/javascript">
$(document).ready(function() {
$("#hidden_link").fancybox().trigger('click');
});
</script>