Come avviare jQuery Fancybox al caricamento della pagina?
https://stackoverflow.com/questions/807271
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Vorrei lanciare un Fancybox (ad es. Fancybox versione di un modale o light box) al caricamento della pagina . Potrei associarlo a un tag di ancoraggio nascosto e attivare l'evento click di quel tag di ancoraggio tramite JavaScript, ma preferirei semplicemente avviare Fancybox direttamente ed evitare il tag di ancoraggio aggiuntivo.
Soluzione
Attualmente Fancybox non supporta direttamente un modo per avviarsi automaticamente. Il lavoro intorno a cui sono stato in grado di funzionare è la creazione di un tag di ancoraggio nascosto e l'attivazione dell'evento click. Assicurarsi che la chiamata per attivare l'evento click sia inclusa dopo aver incluso i file jQuery e Fancybox JS. Il codice che ho usato è il seguente:
Questo script di esempio è incorporato direttamente nell'HTML, ma potrebbe anche essere incluso in un file JS.
<script type="text/javascript">
$(document).ready(function() {
$("#hidden_link").fancybox().trigger('click');
});
</script>
Altri suggerimenti
Ho fatto in modo che funzioni chiamando questa funzione nel documento pronto:
$(document).ready(function () {
$.fancybox({
'width': '40%',
'height': '40%',
'autoScale': true,
'transitionIn': 'fade',
'transitionOut': 'fade',
'type': 'iframe',
'href': 'http://www.example.com'
});
});
È semplice:
Rendi il tuo elemento nascosto prima in questo modo:
<div id="hidden" style="display:none;">
Hi this is hidden
</div>
Quindi chiama il tuo javascript:
<script type="text/javascript">
$(document).ready(function() {
$.fancybox("#hidden");
});
</script>
Guarda l'immagine qui sotto:
Un altro esempio:
<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>
Window.load (al contrario di document.ready ()) sembra essere il trucco usato nelle demo di caricamento JSFiddler di Fancybox 2.0 :
$(window).load(function()
{
$.fancybox("test");
});
Ricorda che potresti utilizzare document.ready () altrove e IE9 si arrabbia con l'ordine di caricamento dei due. Questo ti lascia con due opzioni: cambia tutto in window.load o usa un setTimer ().
O utilizzalo nel file JS dopo aver configurato la tua fancybox:
$('#link_id').trigger('click');
Credo che Fancybox 1.2.1 utilizzerà le opzioni predefinite altrimenti dai miei test quando ne ho bisogno.
perché questa non è ancora una delle risposte ?:
$("#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
});
});
ora attiva solo il tuo link !!
ottenuto questo dalla Home page di Fancybox
Il modo migliore che ho trovato è:
<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>
Nel mio caso, quanto segue può funzionare correttamente. Quando la pagina viene caricata, la lightbox viene visualizzata immediatamente.
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>
La risposta di Alex è fantastica. ma è importante notare che questo chiama lo stile fancybox predefinito. Se hai le tue regole personalizzate, dovresti semplicemente chiamare .trigger fare clic su quell'ancora specifica
$(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');
});
In realtà sono riuscito a innescare un collegamento fancyBox solo da un file JS esterno usando " live " evento:
Per prima cosa, aggiungi l'evento click live sul tuo futuro ancoraggio dinamico:
$('a.pub').live('click', function() {
$(this).fancybox(... fancybox parameters ...);
})
Quindi, aggiungi l'ancora al corpo:
$('body').append('<a class="iframe pub" href="your-url.html"></a>');
Quindi attivare fancyBox con " facendo clic su " l'ancora:
$('a.pub').click();
Il collegamento fancyBox è ora " quasi " pronto. Perché & Quot; quasi & Quot; ? Perché sembra che sia necessario aggiungere qualche ritardo prima di attivare il secondo clic, altrimenti lo script non è pronto.
È un ritardo rapido e sporco usando alcune animazioni sulla nostra ancora ma funziona bene:
$('a.pub').slideDown('fast', function() {
$('a.pub').click();
});
Ecco qua, il tuo fancyBox dovrebbe apparire onload!
HTH
Forse questo aiuterà ... questo è stato usato nell'evento click-size del calendario jQuery full size ( http: // arshaw .com / fullcalendar / ) ... ma può essere usato più in generale per gestire fancybox lanciato da 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;
}
Puoi anche utilizzare la funzione JavaScript nativa setTimeout() per ritardare visualizzazione della casella dopo che il DOM è pronto.
<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>
Nel caso in cui non si abbia un pulsante per fare clic. Voglio dire, se vuoi aprirlo su una risposta Ajax, sarebbe così:
$.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'
}
);
});
Questo aiuterà ..
forse puoi usare jqmodal , è leggero e facile da usare. puoi mostrare la casella modale chiamando
$('.box').jqmShow()
Puoi inserire un link in questo modo (sarà nascosto. Potrebbe essere prima di </body>)
<a id="clickbanner" href="image.jpg" rel="gallery"></a>
E l'attributo rel funzionante o classe come questa
$(document).ready(function() {
$("a[rel=gallery]").fancybox({
openEffect : 'elastic',
closeEffect : 'elastic',
maxWidth : 800,
maxHeight : 600
});
});
Fallo solo con la funzione trigger 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>
