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
