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):

Las imágenes usadas en la galería pertenecen a syntopia bajo esta licencia.
Bonito, ¿no?

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

Más información:

Página oficial del plugin

Un pensamiento en “Probando una ventana modal en Blogger: prettyPhoto

  1. Imagen de Paula el dijo:

    Hola Emilio, es muy linda esta galería, tiene la ventaja de retomar la primera imagen al finalizar, además de dejarte visualizar la que quieras en el orden que quieras.
    Yo uso Scriptaculous+Prototype en vez de JQuery y mi modal preferida es Lightwindow, como puedes ver en mi blog.
    Los pequeños cambios quedaron muy bien :)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.