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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5nf5FcgPiDZz6kvOTrVhVGRP-yMs18cLKq0SUUSrP2S2QEbpwi0oeReB9MPTmM6IsyeMyrMCPyudAhb-X-efRK-T9usFO6PzxwtVq16Zm8IYlO8y_k4-WpLkRrXdw5OjDf4QX2yTF5fw/) left 15% no-repeat; }

#nextLink:hover, #nextLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZcF-21Uq35C4_cCxYbuyWnwUXkToMrcV4vlV00mMUkLB1TCJTX5hLxnKKembJTj2uxgl9E8MkE0EQWQuEC0k2-ts08jKStTUIpMHCelo5_HeerhChylsyICGAnxPkuA1VO_dOS5DX6F0/) 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.