enero 09, 2010

Visor de imagenes Lightbox

Este es un efecto que había visto en algunos blog pero nunca había podido ponerlo en práctica de manera perfecta. No fué sino hasta hoy que conseguí la manera correcta de implementar los códigos para lograr el correcto funcionamiento de la aplicación. Para comenzar debemos colocar sobre </head> el siguiente código:



<style>
#lightbox{    position: absolute;    left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}

#lightbox img{ width: auto; height: auto;}

#lightbox a img{ border: none; }



#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }

#imageContainer{ padding: 10px; }



#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }

#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }

#imageContainer>#hoverNav{ left: 0;}

#hoverNav a{ outline: none;}



#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }

#prevLink { left: 0; float: left;}

#nextLink { right: 0; float: right;}

#prevLink:hover, #prevLink:visited:hover { background: url(http://lh5.ggpht.com/_u4gySN2ZgqE/SnWk89-4azI/AAAAAAAAAj8/hM0MqnVouCQ/prevlabel%5B3%5D.gif) left 15% no-repeat; }

#nextLink:hover, #nextLink:visited:hover { background: url(http://lh6.ggpht.com/_u4gySN2ZgqE/SnWk9-mNiQI/AAAAAAAAAkA/Zg1jXV9xnQM/nextlabel%5B6%5D.gif) right 15% no-repeat; }



#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%    ; }



#imageData{    padding:0 10px; color: #666; }

#imageData #imageDetails{ width: 70%; float: left; text-align: left; } 

#imageData #caption{ font-weight: bold;    }

#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;    }         

#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}      



#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

round-color: #000; }

lute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

round-color: #000; }

</style>

<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js' type='text/javascript'/>

<script src='http://files.bloggerplugins.org/lbox/js/scriptaculous.js' type='text/javascript'/>

<script src='http://blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript'/> 

Luego que tenemos éste código guardado en nuestra plantilla vamos entonces con el segundo paso explicado en la imágen:







[Hacer click sobre la imágen para ampliar]




Fuente:  WidgetsForFree




De ésta manera tenemos instalada la función Lightbox  en buestro blog y el ejemplo lo podrán ver cuando hagan click en la imágen.




4 comentarios em “Visor de imagenes Lightbox”

  • 21 de enero de 2010, 0:11
    Roberto Comenta:

    hola, antes que nada quiero felicitarte por este post. A mi me funciona de maravilla el scripts pero tengo un solo problema. Al hacer clic en la imagen, en la ventana emergente la imagen aumenta demasiado el tamaño. Si me podrías decir como modifico el scripts para ajustar el tamaño de la imagen voy a estar muy agradecido. Muchas gracias.

    delete
  • 21 de enero de 2010, 6:31
    José Pinto Comenta:

    Amigo Roberto,muy buenos dias desde Maracaibo-Venezuela. La imágen a descargar o presentar para éste efecto deberías tenerla alojada en Picasa o en tu PC. Luego debes eliminar la sección que aparece dentro del círculo en la imágen que se muestra en éste post, pues ella determina el tamaño de la imágen.
    Cualquier duda no vaciles en contactarme nuevamente y, por favor, deja tu email.

    Saludos

    delete
  • 10 de agosto de 2011, 18:59
    Anónimo Comenta:

    Buen post, pero tengo una pregunta:

    ¿como encadenar varias fotos en el efecto para poder ir viendo la siguiente o la anterior ?

    Gracias

    delete
  • 10 de octubre de 2011, 8:31
    El Salmón Comenta:

    en la seccion: rel="lightbox" aumenta algo asi
    rel="lightbox[grupo1]" puedes ponerle lo que quieras despues de "lightbox+(aqui mas)" asi diferencis grupos de imagenes.

    delete

Publicar un comentario

Bienvenido, eres libre de expresar tus opiniones.
Para mi no existen comentarios negativos, todos
son positivos porque nos dejan una enseñanza.

Si necesitas contactar conmigo puedes hacerlo a
través de: mitesterlab@gmail.com

 

Mi laboratorio de pruebas Copyright © 2011 -- Template created by O Pregador -- Powered by Blogger