Starten Sie eine Lightbox beim Laden der Seite

Nicht sicher, wie Sie das genau machen, da ich mich nicht so toll an Javascript.

Hier ist, was ich tun möchte: Eine person geht zu einer Seite, sobald die Seite, öffnet sich eine lightbox öffnet sich automatisch, BEVOR die Seite geladen wird, andere Inhalte. Die person wird dann Lesen Sie die Informationen in der lightbox und haben ein paar Möglichkeiten auf, wie Sie Vorgehen wollen. Während Sie diese Informationen Lesen, der rest der Seite geladen wird, in den hintergrund.

Wie würde ich gehen über das tun dies?

Dank!

Hinweis: ich bin mit Fancybox für meine lightbox.

Der einzige Weg, um sicher sein, Sie haben alle Jquery und die erforderlichen Bibliotheken geladen, so etwas zu tun ist und zeichnen Ihre lightbox sobald die "bereit" - Ereignis ausgelöst wird. Bilder laden hinter der lightbox, aber die Seite vollständig geladen ist. Es sei denn Sie überarbeiten Ihre Website, laden Teiltöne über ajax-Anfragen, wird es sehr schwierig, die lightbox vorhanden sein, während HTML-Dokument Inhalt (keine Bilder etc.) geladen wird.

InformationsquelleAutor L84 | 2011-07-24

  1. 2

    Ich würde empfehlen, prettyPhoto, ich hat eine Coole API, mit der Sie zum öffnen der lightbox in javascript.

    Folgenden die API-Dokumentation hier Sie können so etwas wie dies tun zu starten, lightbox beim laden mit JS:

    <script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $().prettyPhoto()
    api_images = ['images/fullscreen/image1.jpg','images/fullscreen/image2.jpg','images/fullscreen/image3.jpg'];
    api_titles = ['Title 1','Title 2','Title 3'];
    api_descriptions = ['Description 1','Description 2','Description 3'];
    $.prettyPhoto.open(api_images,api_titles,api_descriptions);
  });
</script>

    siehe meine Hinweise in dieser Frage:

    jquery-lightbox-plugin: Fehler in IE7 und IE8!

    Danke, ich habe es angeschaut aber wie ich im obigen post bin ich nicht toll, bei JS. Können Sie mir ein Beispiel, starten der lightbox, sobald die Seite startet?
    Ich habe einen Beispiel-code. überprüfen Sie bitte.
    Ich habe versucht, Ihr Beispiel und es hat nicht funktioniert. Es brach auch die Seite selbst (es gibt Boxen, die zeigen sollten unter dem Hauptbild) Hier ist die Seite, auf die ich mich beziehe: ubhape2.com/home2.html
    Sie müssen hinzufügen $j().prettyPhoto(); bevor Sie in die erste Zeile. siehe website-Dokumentation für alle details über die API. - Ich habe versucht, es auf Ihre Seite und es funktionierte!
    Danke! Es hat geklappt! Genau das, was ich gesucht habe! =>

    InformationsquelleAutor Mo Valipour

  2. 2

    Dies ist ähnlich wie Lynda Ansatz und funktioniert auch hier:

    <script type="text/javascript">
//<![CDATA[

<!-- show Lightbox Image Details instantly on page load -->
$(document).ready(function()
{
    $('#YourImageId').trigger('click');
}); 

//]]>   
</script>

...

<img id="YourImageId" ...

    InformationsquelleAutor sulai

  3. 1

    Fand ich diesen, nachdem ich diese Frage gestellt, aber ich poste es hier für die anderen =>

    Skript unten ist für die v1.3.0

    1) inline
<script type="text/javascript" >
$(document).ready(function(){
$("#autostart").fancybox({
'width': 640,  //or whatever
'height': 400
});
}); //document ready

</script>

<body onload="$('#autostart').trigger('click');">

<a href="#mycontent" id="autostart">something here maybe</a>

<div style="display: none">
<p id="mycontent">I want to display this</p>
</div>

1) external html page:

<script type="text/javascript" >
$(document).ready(function(){
$("#autostart").fancybox({
'width': 640,  //or whatever
'height': 400.
'type': 'iframe' //see this?
 });
 }); //document ready

 </script>

<body onload="$('#autostart').trigger('click');">

<a href="http://domain.com/page-to-display.html"
id="autostart">something here maybe ... or not</a>

    InformationsquelleAutor L84

  4. 1

    Wenn Sie nicht wollen, um weiterhin mit fancybox zu jeder Zeit, dann ist hier, wie ich das geschafft habe fancybox öffnen, Seite laden:

    <script type="text/javascript">
    /*<![CDATA[*/
        $(document).ready(function($)
        {
            $.fancybox({
                autoScale:          true,
                autoDimensions:     true,
                transitionIn:       'fade',
                transitionOut:      'fade',
                scrolling:          'no',
                centerOnScroll:     true,
                overlayShow:        true,
                content:            $('#somediv').html(),   
                padding:            20  
            });
        })(jQuery); 
    /*]]>*/
</script>

    Das ist, wie ich es geschafft. Nützlich zu wissen, auch wenn Sie nicht verwenden fancybox!

    InformationsquelleAutor Azirius

Schreibe einen Kommentar