Hay un plugin para Jquery llamado Fancybox el cual muchos sitios estan utilizando, sitios como MCAnime.net y otros.
esto funciona como Shadowbox solo que Fancybox tiene una interfaz más compleja y más estilo.
Fuente | Fancybox
esto funciona como Shadowbox solo que Fancybox tiene una interfaz más compleja y más estilo.
- para agregar esto en Blogger sigue los siguientes pasos.
- Ve a Plantilla Luego has click en Edicion de HTML.
- Luego expande plantilla de artilugios y busca la etiqueta </head>.
- y encima de ella pega lo siguiente.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/53097108/ihojosestudios/example/fancybox/jquery-1.4.3.min.js'/>
<script src='http://dl.dropbox.com/u/53097108/ihojosestudios/example/fancybox/jquery.mousewheel-3.0.4.pack.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/53097108/ihojosestudios/example/fancybox/jquery.fancybox-1.3.4.pack.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/53097108/ihojosestudios/example/fancybox/jquery.fancybox-1.3.4.pack.js' type='text/javascript'/>
<link href='http://dl.dropbox.com/u/53097108/ihojosestudios/example/fancybox/jquery.fancybox-1.3.4.css' media='screen' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
// IJ tutorials
//<![CDATA[
$(document).ready(function() {
/*
* Estilos - imagenes
*/
$("a#fancy1").fancybox();
$("a#fancy2").fancybox({
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
$("a#fancy3").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none'
});
$("a#fancy4").fancybox({
'opacity' : true,
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'none'
});
$("a#fancy5").fancybox();
$("a#fancy6").fancybox({
'titlePosition' : 'outside',
'overlayColor' : '#000',
'overlayOpacity' : 0.9
});
$("a#fancy7").fancybox({
'titlePosition' : 'inside'
});
$("a#fancy8").fancybox({
'titlePosition' : 'over'
});
$("a[rel=example_group]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Imagen ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
/*
* Examples - various
*/
$("#various1").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none'
});
$("#various2").fancybox();
$("#various3").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
$("#various4").fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
//]]>
</script>
- Y luego guardas.
- Ahora cuando vallas a hacer una entrada podras hacer cosas como lo siguiente.
Imagen que se desvanece al cerrar.
<a id="fancy1" href="URL de la imagen"><img src="URL de la miniatura" /></a>
Imagen que hace Zoom al habrir y se minimiza al cerrar
<a id="fancy2" href="URL de la imagen"><img src="URL de la miniatura" /></a>
Imagen que se habre y cierra sin animacion
<a id="fancy3" href="URL de la imagen"><img src="URL de la miniatura" /></a>
Imagen que hace Zoom al habrir pero cierra sin animacion
<a id="fancy4" href="URL de la imagen"><img src="URL de la miniatura" /></a>
Imagen con Closed Caption
<a id="fancy5" href="URL de la imagen" title="Aqui escribe el Closed caption"><img src="URL de la miniatura" /></a>
Imagen con Closed Caption mas extendido y fondo más oscuro
<a id="fancy6" href="URL de la imagen" title="Aqui vendrá el texto de closed caption extendido donde puedes hacer varios renglones de escrito"><img src="URL de la miniatura" /></a>
Imagen con Closed Caption en el marco de la imagen
<a id="fancy7" href="URL de la imagen" title="Aqui vendra el Closed Caption"><img src="URL de la miniatura" /></a>
Imagen con Closed Caption en la imagen
<a id="fancy8" href="URL de la imagen" title="Aqui vendra el Closed Caption"><img src="URL de la miniatura" /></a>
Galeria de imagenes con Closed Caption
<a rel="example_group" href="URL de la imagen 1" title="Aqui vendra el Closed caption"><img alt="" src="URL de la miniatura 1" /></a>
<a rel="example_group" href="URL de la imagen 2" title="Aqui vendra el Closed caption"><img alt="" src="URL de la miniatura 2" /></a>
<a rel="example_group" href="URL de la imagen 3" title="Aqui vendra el Closed caption"><img alt="" src="URL de la miniatura 3" /></a>
Animacion SWF
<a id="various4" href="URL del archivo SWF"><img src="URL de la miniatura" /></a>
Google Maps
<a class="iframe" id="fancy3" href="URL del mapa"><img src="URL de la miniatura" /></a>
Video de Youtube (Elimina lo de azul y agrega el codigo del video que quieras poner (http://www.youtube.com/watch?v=j7_lSP8Vc3o ))
<a class="iframe" id="fancy3" href="http://www.youtube.com/embed/j7_lSP8Vc3o?autoplay=1"><img src="URL de la miniatura" /></a>
- Todo eso puedes poner en la entrada para verlas en modo de ventanas modales.
Fuente | Fancybox