Estos días he estado probando formas de responder a los comentarios siguiendo este tutorial de Vagabundia. Tuve que cambiar un poco la función por un problema con el evento onClick pero ya está listo.
El caso es que lo primero que se me ocurrió fue, en vez de abrir la ventana como proponía, abrirla en un lightbox. ¿No sabéis lo que es? Las imágenes valen más que las palabras, o eso dicen, y aunque al final no lo pude usar para eso, probé uno muy interesante. Aquí esta el ejemplo (click sobre las imágenes):
Cómo usarlo en Blogger
Para ponerlo en blogger sólo tenéis que copiar esto antes de «</head>» en el editor de HTML.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<link charset='utf-8' href='http://emiliocobos.site40.net/blogger/add-ons/prettyphoto/css/prettyPhoto.css' media='screen' rel='stylesheet' type='text/css'/>
<script charset='utf-8' src='http://emiliocobos.site40.net/blogger/add-ons/prettyphoto/js/jquery.prettyPhoto.js' type='text/javascript'/>
Ahora, para que funcione, sólo tenéis que copiar ésto encima de «</body>»:
<script type="text/javascript">
<![CDATA[
jQuery(document).ready(function($){
$("a[rel^='prettyPhoto']").prettyPhoto({
});
});
]]>
</script>
En principio ya lo tendríais, pero se puede personalizar mucho más cambiando, por ejemplo, el tema, la velocidad de la animación o la opacidad del fondo. Tendríamos que cambiar dentro de «<![CDATA»:
jQuery(document).ready(function($){
$("a[rel^='prettyPhoto']").prettyPhoto({
animation_speed: 'fast', /* Podéis poner: fast/slow/normal */
opacity: 0.80, /* Valor entre 0 y 1 */
theme: 'light_rounded', /*Podéis poner: pp_default / light_rounded / dark_rounded / light_square / dark_square / facebook */
social_tools: false /* Quitamos los botones de facebook, Twitter...*/
});
});
Galería de imágenes:
Una vez tenéis eso, hay que hacer que la función lea vuestras imágenes. Para ello sólo hay que poner el atributo rel="prettyPhoto", Pero para hacer una galería hace falta poner rel="prettyPhoto[nombre_de_la_galería]".
Este es el código de una galería:
<div class="galeria">
<a href="URL_IMAGEN_1" rel="prettyPhoto[Primera-Galería]" alt="Título" title="Texto para mostrar como descripción"><img src"URL_IMAGEN_1"/></a>
<a href="URL_IMAGEN_2" rel="prettyPhoto[Primera-Galería]" alt="Título" title="Texto para mostrar como descripción"><img src"URL_IMAGEN_2"/></a>
<a href="URL_IMAGEN_3" rel="prettyPhoto[Primera-Galería]" alt="Título" title="Texto para mostrar como descripción"><img src"URL_IMAGEN_3"/></a>
</div>
<div style="clear: both;"></div><!-- Esto sirve para que no se junte con el texto de debajo. Podríamos usar clearfix también-->
<style>/*Estilos para PRETTYPHOTO*/
.galeria a[rel^=prettyPhoto] img{
width:75px; /*Hacemos que sean miniaturas cuadradas*/
height:75px;
float:left; /*Las alineamos horizontalmente*/
margin:7px;/*Las separamos*/
}
galeria br{display:none;}/*Para que se vea alineado*/
</style>
Otras funciones:
También podemos ver gracias a esta utilidad otras muchas cosas como webs, vídeos de Youtube, flash…