Cómo usar el plugin lightbox colorbox?

Quiero mostrar el contenido de un div oculto en una caja de luz cuando se carga la página.Cómo usar el plugin lightbox colorbox?

¿Cómo puedo hacer esto con color box?

Lo que no estoy entendiendo:

¿Es necesario utilizar sus archivos CSS? ¿Cuáles? ¿Dónde está?

¿Cómo puedo hacer que la caja de luz aparezca cuando se carga la página?

He intentado esto, pero sin suerte:

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

Fuente

2009-08-07 Greg

La respuesta de jyoseph estaba en el camino correcto. También tuve que hacer visible el div antes de que apareciera (de lo contrario, solo muestra una pantalla negra). y luego tuve que esconder el div después de que el usuario cierra la caja de luz.

Nota: También tuve que editar el archivo css para que apuntara al directorio donde pongo mis imágenes.

Aquí está mi código final:

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

Fuente

2009-08-08 16:05:48 Greg

Usted puede renunciar al mostrar y ocultar mediante la colocación de el div que quieres mostrar "#div_id_i_want_to_show" dentro de un div oculto. – mcassano

Sí es necesario utilizar el archivo css ColorBox desde cualquier tema que desee. Hay 5 incluidos en la descarga. Vea las carpetas Ejemplo1, Ejemplo2, Ejemplo3, Ejemplo4, Ejemplo5. Cada uno tendrá un archivo css y una carpeta con imágenes. También puede crear su propio tema personalizado, si lo desea.

Con el fin de abrir ColorBox sobre la carga de la página es necesario utilizar el método público: $ .Colorbox()

Ejemplo de trabajo: http://jsbin.com/uficu

En este ejemplo tengo html: <div id="content">Hello from JSBin</div>

y el método público: $ .Colorbox ({href: '# contenido', abierta: cierto, en línea: true})

Mira la documentación: http://colorpowered.com/colorbox/

Fuente

2009-08-08 02:52:45 jyoseph

pruebe la opción abierta Olli.

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

Fuente

2009-11-28 18:30:04 johnnymire

Aquí hay un truco. No es necesario agregar javascript (o enganchar el evento de cierre de colorbox) para esto.

jquery.colorbox reubica su contenido en línea en una estructura que crea fuera de la raíz del cuerpo html>, antes de mostrarlo, y lo mueve hacia atrás cuando está cerrado. Esa es una IMO de comportamiento extraño, pero aprovecha y aplica tu 'regla de ocultamiento' en consecuencia.

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

Alternativamente, invertir las reglas y coloque una 'regla de revelar' que depende de un elemento de caja de colores definidos.

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

Ah, también, otra opción es mantener su #div_id_i_want_to_show dentro de un envoltorio .hiddenDiv.

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

Fuente

2010-11-22 19:02:34 Shannon

Al hacer clic sobre algún botón emailPopup

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

que desea abrir alguna ventana emergente cuyo ID es emailPopup_content utilizando colorbox

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

Todo lo que tiene que hacer es escribir el jQuery como:

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

Explicación: el jQuery oculto emailPopup_content div se muestra en la ventana emergente como se indica bajo href

no se olvide de incluir:

<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

Fuente

2015-09-29 12:23:01 KNU

Cómo usar el plugin lightbox colorbox?

Respuesta

Cuestiones relacionadas