Lightbox es un script popular en que han comentado en el blog de unijimpe en Lightbox: imágenes Emergentes, este script permite mostrar objetos, imágenes, animaciones flash entre otras cosas...
Creando el efecto
Para realizar el efecto vamos a necesitar dos divs:
Para editar los estilos, bastaría con echar una mano a los dos divs, background_id y content_id y modificar lo a su gusto.
Ahora vamos a proceder con añadir jQuery la versión 1.6.3 y un poco de código Javascript:
Lo siguiente serían los botones:
Uniendo todo esto, ya tendríamos nuestro Efecto Lightbox funcionando, bueno como comente ya, pueden modificar el estilo a sus gustos.
[Descargar ##download##]
Referencias:
Creando el efecto
Para realizar el efecto vamos a necesitar dos divs:
[<div id="background_id" style="position: absolute;width:3000px;height:3000px;top:0%;left:0%;background-color:#000000;opacity:.70;filter:alpha(opacity=70);-moz-opacity:0.7;z-index:200;display:none;"> </div> <div id="content_id" style="position:absolute;margin:-100px 0 0 -100px;width:200px;height:200px;top:50%;left:50%;color:#FFFFFF;background-color: #4d303f;padding:0 10px 10px 10px;border:4px solid #FFFFFF;z-index:201;display:none;"> <p style="text-align:right;padding:0 0 20px 0;"> <a id="close_content" href="#">Cerrar</a> </p> <center>CONTENIDO</center> </div>]
Para editar los estilos, bastaría con echar una mano a los dos divs, background_id y content_id y modificar lo a su gusto.
Ahora vamos a proceder con añadir jQuery la versión 1.6.3 y un poco de código Javascript:
[<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#open_content").click(function(){ $('#background_id').show(); $('#content_id').show(); }); $("#close_content").click(function(){ $('#background_id').hide(); $('#content_id').hide(); }); }); </script>]
Lo siguiente serían los botones:
[<a id="open_content" href="#">Abrir contenido</a> <a id="close_content" href="#">Cerrar</a>]
Uniendo todo esto, ya tendríamos nuestro Efecto Lightbox funcionando, bueno como comente ya, pueden modificar el estilo a sus gustos.
Referencias:
