Anteriormente hicimos una Galería de Imágenes con CSS acomodando las imágenes veticales y horizontales, ahora le daremos mayor dinamismo mediante un lightbox basado en las librerias prototype y scriptaculous.
Agregamos estas líneas en la cabecera de la página del ejemplo anterior
<head> ... <link rel="stylesheet" href="estilo/lightbox.css" type="text/css" media="screen" /> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects" type="text/javascript"> </script> <script src="js/lightbox.js" type="text/javascript"></script> ... </head>
Simplemente añadiremos el atributo rel="lightbox[fotos]" en los enlaces de las imágenes que pertenecen a la galería, de igual forma agregaremos el atributo title="" para señalar la descripción de cada foto.
<div class="galeria"> <div class="celda"> <img title="Descripción de foto" src="imagenvertical.jpg" width="119" height="162" rel="lightbox[fotos]" /> </div> <div class="celda h"> <img title="Descripción de foto" src="imagenhorizontal.jpg" width="156" height="126" rel="lightbox[fotos]" /> </div> </div>
Maquetación con CSS, HTML flotar bloques, layout o cajas. Diseño web estandar, colores CSS, ancho, alto.
Ver más »Códigos CSS para imágenes, casos prácticos, ejemplos.
Ver más »Volumen de letras, fuentes, tipografía, interlineado, tamaño de texto, subrayado, efectos de texto:
Ver más »Aprenderemos a estructurar y diseñar todo tipo de menus con CSS mediante ejemplos y casos prácticos.