Mystique: Efecto elegante para las imagenes

Publicar imágenes de gran calidad es un problema cuando usamos blogger, ya que la imagen se puede salir de los margenes dejándonos un blog con mala presentación.

La solución a ese problema es agregar efecto a las imágenes para que cuando se de clic sobre ellas se muestre la imagen de tamaño original lo que da muchas ventajas a la hora de cargar la página porque solo estaremos cargando las miniaturas y las imágenes tamaño completo cuando un usuario quiera verlas.

Para lograr el efecto debemos agregar las siguientes lineas antes del </body> de la plantilla.

<script src='http://sites.google.com/site/rincondelrecursoweb/home/jquery.mystique.min.js' type='text/javascript'/>
<script type='text/javascript'>
    var isIE6 = false;
    var isIE = false;
</script>

Las ponemos en ese lugar para que sea lo último en cargar y no dificulte la lectura de la página.

Adicionamos los estilos antes de ]]></b:skin>

#fancy_overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #FFF;
background: -webkit-radial-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
display: none;
background: -moz-linear-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
display: none; }

#fancy_wrap { text-align: left; }

#fancy_loading {
position: absolute;
height: 100px;
width: 100px;
cursor: pointer;
display: none;
overflow: hidden;
background: transparent;
z-index: 100; }

#fancy_loading {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background:transparent url(http: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjooED7j8M6RzAHE_opLfKYzI9ZFptm3eB-_mYtNv0khyphenhyphenzc6i56RBJAKD6vB7kmrdXpVkiwdxXZ8sCG95iftZrgUtBuPAorMzH2DvtjLrTDnPJEU255t2sJDl0NTNxcWeQ0OHyWEcxKbdha/s1600/loader.gif) no-repeat; }

#fancy_loading_overlay {
position: absolute;
background-color: #FFF;
z-index: 30; }

#fancy_outer {
position: absolute;
top: 0;
left: 0;
z-index: 90;
padding: 18px 18px 33px;
margin: 0;
overflow: hidden;
background: transparent;
display: none; }

#fancy_inner {
position: relative;
width: 100%;
height: 100%;
border-radius: 12px;
box-shadow: 0px 0px 25px rgba(0, 0, 0, .5); }

#fancy_content {
margin: 0;
z-index: 100;
position: absolute; }

#fancy_ {
background: #000;
color: #FFF;
height: 100%;
width: 100%;
z-index: 100; }

img#fancy_img {
position: absolute;
top: 0;
left: 0;
border: 0;
padding: 0;
margin: 0;
z-index: 100;
width: 100%;
height: 100%; }

#fancy_frame {
position: relative;
width: 100%;
height: 100%;
display: none; }

#fancy_ajax {
width: 100%;
height: 100%;
overflow: auto; }

a#fancy_left,a#fancy_right {
position: absolute;
bottom: 0;
height: 100%;
width: 35%;
cursor: pointer;
z-index: 111;
display: none;
outline: none; }

a#fancy_left { left: 0; }

a#fancy_right { right: 0; }

span.fancy_ico {
position: absolute;
top: 50%;
margin-top: -15px;
width: 30px;
height: 42px;
z-index: 112;
cursor: pointer;
display: block;
opacity: 0.5; }

span#fancy_left_ico { left: -9999px; }

span#fancy_right_ico { right: -9999px; }

a#fancy_left:hover { visibility: visible; }

a#fancy_right:hover { visibility: visible; }

a#fancy_left:hover span { left: 20px; }

a#fancy_right:hover span { right: 20px; }

.fancy_bigIframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent; }

#fancy_title {
width: 100%;
z-index: 100;
display: none;
background: #4e4e4e;
color: #fff;
text-align: center;
font-weight: bold;
font-size: 150%;
padding: .2em 0; }

No hay necesidad de especificar clases a las imagenes con este script se detectan todas las etiquetas <a> que contenga un enlace a una imagen .jpg, .png o .gif