Wie starte ich jQuery Fancybox beim Laden der Seite?

95

Ich möchte beim Laden einer Seite eine Fancybox (z. B. die Fancybox- Version einer Modal- oder Light-Box) starten . Ich könnte es an ein verstecktes Ankertag binden und das Klickereignis dieses Ankertags über JavaScript auslösen, aber ich würde die Fancybox lieber direkt starten und das zusätzliche Ankertag vermeiden.

jquery jquery-plugins fancybox Blegger
quelle

Wenn Sie auf die offizielle Fancybox-Website ( Fancybox.net ) gehen, haben sie ein automatisches Popup, so dass Sie ihre Seitenquelle überprüfen können, um zu sehen, wie sie es getan haben (Hinweis: nicht das gleiche wie die akzeptierte Antwort)

Nippysaurus

15

Um Zeit für die anderen zu sparen - $ (function () {$ .fancybox ('<div> Ändere mich </ div>', {padding: 20});});

Nikib3ro

162

Fancybox unterstützt derzeit keine Möglichkeit zum automatischen Starten. Die Arbeit, an der ich arbeiten konnte, besteht darin, ein verstecktes Ankertag zu erstellen und das Klickereignis auszulösen. Stellen Sie sicher, dass Ihr Aufruf zum Auslösen des Klickereignisses enthalten ist, nachdem die JS-Dateien jQuery und Fancybox enthalten sind. Der Code, den ich verwendet habe, lautet wie folgt:

Dieses Beispielskript ist direkt in HTML eingebettet, kann aber auch in eine JS-Datei aufgenommen werden.

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

Blegger
quelle

1

nur zu Ihrer Information das $ (Dokument) .ready (function () {$ ("# hidden_link"). fantasbox (). trigger ('click');}); ist dasselbe wie: function LaunchFancyBox () {$ ("# hidden_link") .ancybox (). trigger ('click'); } $ (document) .ready (LaunchFancyBox ());

Mark Schultheiss

4

Ist das gleiche wie es $(document).ready(LaunchFancyBox());sein sollte $(document).ready(LaunchFancyBox);. (Beachten Sie das Fehlen des Funktionsaufrufs am Ende).

Adam Luter

Ich habe es versucht, aber ohne Erfolg. Ich musste den Inhalt über Ajax laden, dann rufe ich $ .fancybox auf ({... den Inhalt übergeben).

Giubueno

@Blegger Ihre Lösung $ ("# hidden_link"). Fancybox (). Trigger ('click'); funktioniert perfekt für mich.

Mukesh

66

Ich habe dies zum Laufen gebracht, indem ich diese Funktion in document ready aufgerufen habe:

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

JordanC
quelle

Dies hat bei mir nicht funktioniert, da beim Umgang mit dem Parameter href etwas schief geht. Die "Warten" -Animation wird für immer angezeigt.

Boris van Schooten

3

Es ist erwähnenswert, dass dies die Methode zu sein scheint, die die Fancybox-Entwickler selbst entwickeln. Wenn Sie zur Fancybox-Website ( Fancybox.net ) gehen, sollte ein modaler Dialog angezeigt werden, der Sie darüber informiert, dass "Fancybox2 freigegeben ist!" ... Wenn Sie sich die Quelle für diese Seite ansehen, können Sie sehen, dass sie die in dieser Antwort beschriebene Technik verwendet haben.

Nippysaurus

Dies sollte die akzeptierte Antwort sein! Die akzeptierte Lösung funktioniert, aber das Hinzufügen eines versteckten Ankers, über den Sie ein Klickereignis auslösen, ist nicht wirklich die sauberste, oder?

luigi7up

Einverstanden, die Verwendung eines versteckten Links ist ein Hack. Mach es richtig.

Jamsi

Sehr einfach! Vielen Dank! Ich habe ein Autoplay-Youtube darin eingebettet. Gibt es eine Möglichkeit, den Leuchtkasten zu schließen, sobald das Video fertig ist?

Antonio Almeida

12

Es ist einfach:

Machen Sie Ihr Element zuerst so versteckt:

<div id="hidden" style="display:none;">
    Hi this is hidden
</div>

Rufen Sie dann Ihr Javascript auf:

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

Schauen Sie sich das Bild unten an:

Geben Sie hier die Bildbeschreibung ein

Ein anderes Beispiel:

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

Geben Sie hier die Bildbeschreibung ein

Hisham Muneer
quelle

10

Window.load (im Gegensatz zu document.ready ()) scheint der Trick zu sein, der in den JSFiddler-Onload-Demos von Fancybox 2.0 verwendet wird :

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

Bedenken Sie jedoch, dass Sie document.ready () möglicherweise an anderer Stelle verwenden und IE9 sich über die Ladereihenfolge der beiden aufregt. Sie haben also zwei Möglichkeiten: Ändern Sie alles in window.load oder verwenden Sie einen setTimer ().

Chris S.
quelle

Diese Antwort funktioniert besser für mich, wenn eine Seite mit einem ios-ähnlichen Warnungs-Popup beginnen und dann geschlossen werden soll. Die beliebteste Antwort, als ich versuchte, sie zu implementieren, machte es so oft, dass ich auf fantasievolle Box geklickt habe. Schließen Sie, dass das Element neu geladen wird, anstatt zu verschwinden. Vielen Dank!

Nathaniel Flick

Ihre Antwort Sir ist am relevantesten und 100% richtig. Vielen Dank.

Schalk Keun

8

Oder verwenden Sie dies in der JS-Datei, nachdem Ihre Fancybox eingerichtet wurde:

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

Ich glaube, dass Fancybox 1.2.1 ansonsten Standardoptionen aus meinen Tests verwendet, wenn ich dies tun musste.

cynge13
quelle

5

Warum ist das noch keine der Antworten?:

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

Jetzt einfach deinen Link auslösen !!

habe das von der Fancybox Homepage bekommen

Thomas
quelle

5

Der beste Weg, den ich gefunden habe, ist:

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

Arena-Ru
quelle

Dies schlägt fehl, da die schließende Klammer der Optionen kommentiert ist.

Teekin

¡Sauber und einfach! Funktioniert perfekt. Vielen Dank!

Carolina

4

In meinem Fall kann Folgendes erfolgreich funktionieren. Wenn die Seite geladen wird, wird der Leuchtkasten sofort eingeblendet.

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
quelle

3

Alex 'Antwort ist großartig. Es ist jedoch wichtig zu beachten, dass dies den Standard-Fancybox-Stil aufruft. Wenn Sie Ihre eigenen benutzerdefinierten Regeln haben, sollten Sie einfach .trigger aufrufen und auf diesen bestimmten Anker klicken

$(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');
});

Andrew Scott Kimrey
quelle

2

Ich habe es tatsächlich geschafft, einen FancyBox-Link nur aus einer externen JS-Datei mithilfe des "Live" -Ereignisses auszulösen:

Fügen Sie zunächst das Live-Klickereignis zu Ihrem zukünftigen dynamischen Anker hinzu:

$('a.pub').live('click', function() {
  $(this).fancybox(... fancybox parameters ...);
})

Fügen Sie dann den Anker an den Körper an:

$('body').append('<a class="iframe pub" href="your-url.html"></a>');

Dann lösen Sie die FancyBox aus, indem Sie auf den Anker "klicken":

$('a.pub').click();

Der FancyBox-Link ist jetzt "fast" fertig. Warum "fast"? Da Sie anscheinend eine Verzögerung hinzufügen müssen, bevor Sie den zweiten Klick auslösen, ist das Skript sonst nicht bereit.

Es ist eine schnelle und schmutzige Verzögerung mit einigen Animationen auf unserem Anker, aber es funktioniert gut:

$('a.pub').slideDown('fast', function() {
  $('a.pub').click();
});

Los geht's, deine FancyBox sollte aufgeladen erscheinen!

HTH

Kapsel
quelle

1

Vielleicht hilft dies ... dies wurde im jQuery-Kalender- Klickereignis in voller Größe ( http://arshaw.com/fullcalendar/ ) verwendet ... aber es kann allgemeiner verwendet werden, um mit der von jQuery gestarteten Fancybox umzugehen.

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

Leigh
quelle

1

Sie können auch die native JavaScript-Funktion verwenden setTimeout(), um die Anzeige der Box zu verzögern, nachdem das DOM bereit ist.

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

John Kary
quelle

1

Falls Sie keine Schaltfläche zum Klicken haben. Ich meine, wenn Sie es auf Ajax-Antwort öffnen möchten, dann wäre es so:

$.fancybox({
      href: '#ID',
      padding   : 23,
      maxWidth  : 690,
      maxHeight : 345
});

Maha Dev
quelle

1

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

Das wird helfen..

Prabhagaran
quelle

0

Sie können einen Link wie diesen einfügen (er wird ausgeblendet. Kann vorher sein </body>)

<a id="clickbanner" href="image.jpg" rel="gallery"></a>

Und arbeiten rel Attribut oder Klasse wie diese

$(document).ready(function() {
    $("a[rel=gallery]").fancybox({
        openEffect  : 'elastic',
        closeEffect : 'elastic',
        maxWidth    : 800,
        maxHeight   : 600
    });
});

Tun Sie es einfach mit der jquery-Triggerfunktion

$( window ).load(function() {
  $("#clickbanner").trigger('click');
});

Nixis
quelle

0

HTML:

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

JS:

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

AnasSafi
quelle

1

Während dieser Code die Frage beantworten kann, würde die Bereitstellung eines zusätzlichen Kontexts darüber, wie und / oder warum er das Problem löst, den langfristigen Wert der Antwort verbessern.

Nic3500

-1

Vielleicht können Sie jqmodal verwenden , es ist leicht und einfach zu bedienen. Sie können die Modalbox durch Aufrufen anzeigen

$('.box').jqmShow()

Limboy
quelle

Ich denke nicht, dass dies funktioniert, weil das nicht die Klasse der FancyBox ist

Jose Basilio

1

Meine Designer möchten das Erscheinungsbild von Fancybox, und ich würde es vorziehen, nicht zu versuchen, es für jqmodal zu implementieren. Außerdem verwenden wir bereits Fancybox auf der Website und ich möchte nicht zwei verschiedene Lightbox-Impmentationen unterstützen.

Blegger

Wie starte ich jQuery Fancybox beim Laden der Seite?

Antworten: