Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Imágenes que se agrandan con efecto deslizante usando expando

Con este efecto, las imágenes de tu blog se ampliarán, de manera deslizante, a su tamaño original.

En script lo proporciona la librería Dynamic Drive.

Puedes descargar el script desde aquí e instalarlo en tu plantilla o utilizar el que yo alojé en Google sites.


Ver ejemplo online


Diseño>Edición HTML>expandimos artilugios


Busca la etiqueta </head> y agrega el siguiente script encima:

<script src='http://sites.google.com/site/scriptsbalcon/b/balcon-expando.js' type='text/javascript'>
</script>

Ahora busca la etiqueta ]]></b:skin> y agrega este bloque para dar un poco de estilo a las imágenes:

img.expando{
border: 1px solid #cccccc;
background: transparent;
padding:2px;
vertical-align: top;
}

Para cambiar la decoración de las imágenes...

border: 1px solid #cccccc; Es el borde. Puedes cambiar el grosor (1px), el estilo de borde (solid. Consulta esta entrada para ver más modelos) y el color (#cccccc).

background: transparent; Es el fondo. Está en transparente. Para aplicarle un color de fondo, busca el código en la tabla de colores e inclúyelo en la línea, sustituyendo la palabra transparent.

Por último guarda cambios.

Cada vez que desees aplicar el efecto, debes incluir la imagen con esta línea:

<img class="expando" src="URL DE TU IMAGEN" width="150" height="150"/>

Sustituye URL DE TU IMAGEN por la dirección de tu imagen, icono o logo.

Ten en cuenta que debes personalizar el grosor (width="150") y la longitud (height="150") de la imagen que se mostrará "encojida".

Para incluir el efecto en una imagen que ya tengas alojada, agrega la clase: class="expando" justo antes del src (que indica la dirección de la imagen).

La Trucoteca de Blogs dice...

Esta muy chulo oye...
Lo probaré a ver que tal.
Saludos!!!

Abel3D dice...

Que tal Jaime, unas preguntas, dices que hay que bajar el script, pero tu ya nos lo estás dando en esta entrada en cada paso de la explicacion. Por otro lado, como se comportaria el blog si la imagen es muy grande???? o sea, si la imagen se agranda mucho, que pasaria con todo el contenido de la web?? no se haria pedazos???? saludos.

Jaime Trujillo Escobedo dice...

La Trucoteca de Blogs, me alegra que te guste. ¡Ya me contarás! ☺.

Jaime Trujillo Escobedo dice...

Abel3D, no me refiero a que descarguéis el script, simplemente a que, si queréis, podeis utilizar el de Dynamic Drive (alojado en dicho sitio).

El script que yo alojé en Google Sites es el mismo que el de dicha librería, la única diferencia es el alojamiento.

En cuanto a lo que dices sobre las imágenes, es aconsejable que el ancho de éstas no supere el ancho del main-wrapper (zona de las entradas).

De esta forma, la imagen no se "ocultará" entre la sidebar y el resultado no provocará un desorden ;).

Yo dice...

Este sí está bueno :) Gracias.

Jaime Trujillo Escobedo dice...

Yo, no hay de qué ;).

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo