Iconos de Alta Definición.

En ésta oportunidad voy a dejarles un interesante pack de íconos de redes sociales de una muy alta definición, que haran lucir extraordinaria a nuestra página web o blog. El autor de dicha obra es IconShock, con una licencia gratuíta, íconos avalados en medidas que van desde 32x32 px hasta 256x256 px. Dicho pack contiene 41 íconos: Disfrutenlos...!!

Descargar desde éste enlace.

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.