Wie benutze ich die Lightbox Plugin Colorbox?

Ich möchte den Inhalt eines versteckten Div in einer Lightbox anzeigen, wenn die Seite geladen wird.Wie benutze ich die Lightbox Plugin Colorbox?

Wie kann ich das mit color box tun?

Was ich nicht verstehen:

Benötige ich ihre CSS-Dateien verwenden? Welche, wo ist es?

Wie mache ich den Leuchtkasten, wenn die Seite geladen wird?

habe ich versucht, dieses aber kein Glück:

$(document).ready(function(){ 
    $("#div_id_i_want_to_show").colorbox({width:"50%", inline:true}); 
});

Quelle

2009-08-07 Greg

jyosephs Antwort war auf dem richtigen Weg. Ich musste auch das Div sichtbar machen, bevor es auftauchen würde (sonst zeigt es nur einen schwarzen Bildschirm). und dann musste ich das div verstecken, nachdem der Benutzer die Lichtbox geschlossen hat.

Hinweis: Ich musste auch die CSS-Datei bearbeiten, um auf das Verzeichnis zu zeigen, in das ich meine Bilder legte.

Hier ist meine letzte Code:

$(document).ready(function(){ 
    $('#div_id_i_want_to_show').show(); 
    $.colorbox({'href':'#div_id_i_want_to_show', 'inline':true, 'width':'600px', 'height':'600px'}); 
    $(document).bind('cbox_closed', function(){ 
      $('#div_id_i_want_to_show').hide(); 
    }); 
});

Quelle

2009-08-08 16:05:48 Greg

Sie die Vorführung verzichten kann und sich versteckt, indem das div was du "#div_id_i_want_to_show" in einem versteckten div anzeigen willst. – mcassano

Sie die ColorBox CSS-Datei aus verwenden Sie müssen je nachdem, was Thema, das Sie wollen. Es gibt 5 im Download enthalten. Siehe die Ordner Beispiel1, Beispiel2, Beispiel3, Beispiel4, Beispiel5. Jeder hat eine CSS-Datei und einen Ordner mit Bildern. Sie können auch ein eigenes benutzerdefiniertes Design erstellen, wenn Sie möchten.

Um ColorBox auf der Seite zu laden Sie die öffentliche Methode verwenden müssen, zu öffnen: $ .colorbox()

Arbeitsbeispiel: http://jsbin.com/uficu

In diesem Beispiel habe ich html: <div id="content">Hello from JSBin</div>

und die öffentliche Methode: $ .colorbox ({href: '# content', offen: true, inline: true})

Schauen Sie sich die Dokumentation: http://colorpowered.com/colorbox/

Quelle

2009-08-08 02:52:45 jyoseph

Versuchen Sie, die offene Option Olli.

$(".el").colorbox({open:true})

Quelle

2009-11-28 18:30:04 johnnymire

Hier ist ein Trick. Es ist nicht notwendig, Javascript hinzuzufügen (oder das Ereignis colorbox close anzuhängen).

jquery.colorbox verschiebt Ihren Inline-Inhalt in eine Struktur, die er außerhalb von html> body root erstellt, bevor er angezeigt wird, und verschiebt ihn zurück, wenn er geschlossen wird. Das ist ein merkwürdiges Verhalten IMO, aber nimm Vorteil und lege deine "Versteckregel" entsprechend an.

<style> 
#div_id_i_want_to_show { display: block; ...your other style rules... } 
#divParent #div_id_i_want_to_show { display: none; } 
<style> 
<div id='parent'><div id='div_id_i_want_to_show'>...

Alternativ können Sie die Regeln invertieren und eine "Enthüllungsregel" platzieren, die von einem durch colorbox definierten Element abhängt.

<style> 
#div_id_i_want_to_show { display: none; ...your other style rules... } 
.colorbox #div_id_i_want_to_show { display: block; } 
<style> 
<div id='div_id_i_want_to_show'>...

Oh, auch noch eine weitere Option ist Ihr #div_id_i_want_to_show in einem .hiddenDiv Wrapper zu halten.

<style> 
#div_id_i_want_to_show { ...your style rules... } 
.hiddenDiv { display: none; } 
<style> 
<div class='.hiddenDiv'><div id='div_id_i_want_to_show'>...

Quelle

2010-11-22 19:02:34 Shannon

Auf klicken einige Taste emailPopup

<div class="emailUse"> 
    <a class="emailPopup" href="#emailPopup_content">Mail Me</a> 
</div>

Sie wollen einige Popup öffnen, dessen ID mit emailPopup_content colorbox

<div style='display: none'> 
    <div id='emailPopup_content'> 
    Hi user, 
    Thank you! 
    </div> 
</div>

Alles, was Sie tun müssen, ist die jQuery schreiben als:

$(document).ready(function() { 
    $('.emailPopup').colorbox({inline:true, width:"380px",height:"410px"}); 
});

Erklärung: die versteckte div emailPopup_content jQuery ist in der Pop-up gezeigt, wie unter href

verwiesen

vergessen Sie NICHT enthalten:

<head> 
    <link rel="stylesheet" href="colorbox.css"> 
    <script src="jquery.min.js"></script> 
    <script src="jquery.colorbox-min.js"></script> 
</head>

http://www.jacklmoore.com/colorbox/jquery.colorbox.js http://www.jacklmoore.com/colorbox/example4/colorbox.css

Quelle

2015-09-29 12:23:01 KNU

Wie benutze ich die Lightbox Plugin Colorbox?

Antwort

Verwandte Themen