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.

Galería de imágenes con transiciones para tu blog

En la entrada anterior expliqué la manera de conseguir un slideshow o mini-galería de imágenes en el blog. En esta otra entrada he querido presentaros una galería similar, también de sencilla instalación pero de un tamaño más grande y con transiciones / efectos a medida que pasamos a la siguiente fotografía.


album o galeria de imagenes para el blog, trucos blogger, ayuda blogger, ayuda con el blog

Puedes verla en funcionamiento accediendo a este blog. La instalación es muy sencilla, tan solo necesitas seguir mis indicaciones:

Diseño>Edición de HTML>expandimos artilugios



Busca la etiqueta </head> y añade los scripts necesarios encima:

<script src='http://sites.google.com/site/scriptsbalcon/b/jquery-1.4.2.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/scriptsbalcon/b/coin-slider.min.js' type='text/javascript'/>
<link href='http://sites.google.com/site/scriptsbalcon/b/coin-slider-styles.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
$(document).ready(function() {
$('#coin-slider').coinslider();
});
</script>

Guarda la plantilla.

Diseño>añadir gadget (elemento de página)>html-javascript




Pega este código:

<div id='coin-slider'>

<a href="#" target="_blank">

<img style="width: 507px; height: 405px;" src="URL IMAGEN" />
<span>
Texto de la imagen
</span>
</a>

<a href="#" target="_blank">
<img style="width: 507px; height: 405px;" src="URL IMAGEN" />
<span>
Texto de la imagen
</span>
</a>

<a href="#" target="_blank">
<img style="width: 507px; height: 405px;" src="URL IMAGEN" />
<span>
Texto de la imagen
</span>
</a>

</div>

Sustituye en cada caso URL IMAGEN por la dirección de tu imagen y Texto de la imagen por una frase para describir la fotografía.

Para añadir más imágenes a la galería, incluye bloques de código como este (siempre antes del cierre </div>)...

<a href="#" target="_blank">
<img style="width: 507px; height: 405px;" src="URL IMAGEN" />
<span>
Texto de la imagen
</span>
</a>

Puedes editar el ancho y el alto de las imágenes en los atributos width: 507px; height: 405px;, respectivamente.

Guarda el gadget y habrás terminado.

Isaac Chavero dice...

Muchas gracias es lo que necesitaba para promocionar mi nuevo blog Blog del ICP

Jaime Trujillo Escobedo dice...

Isaac, estoy seguro de que esta galería resulta ideal para tu blog ya que presenta las fotografías de una manera muy atractiva y capta la atención de cualquier lector.

Abel3D dice...

Felicidades Jaime, es un buen truco, una pregunta, es posible cambiar el diseño y texto de las palabras "siguiente" y "anterior"????, como para ponerlas con botón o con otra palabra???, saludos.

Jaime Trujillo Escobedo dice...

Abel3D, puedes lograrlo editando el script "coin-slider.min.js", cambiando la palabra ANTERIOR y la palabra SIGUIENTE por lo que desees.

Si necesitas ayuda dímelo. Por otra parte, puede que prefieras hacer uso de la MiniGalería ya que posee botones de navegación e incluso de pausa.

piXel dice...

Hay alguna posibilidad de poder incrustar esta galería en una entrada?? en vez de en un gadget??

Jaime Trujillo Escobedo dice...

Pixel, en principio si pero te aconsejo que pruebas a publicarla en una entrada de tu blog para comprobar el resultado (que suele variar según la plantilla).

Intenta publicarla también en una página individual de blogger y posteriormente házme saber su dirección para que pueda visitarla y ayudarte en caso de necesitar una modificación.

piXel dice...

Si la pude publicar, pero tengo algunos problemas con el tamaño de las imágenes..

y el tiempo que tarda en cargar..

Es necesario algún tamaño de imagen en especial??
Lo estoy probando acá..

Jaime Trujillo Escobedo dice...

Pixel, prueba a eliminar en el código:

<span>
Texto de la imagen
</span>

También te consejaría que le dieses un vistazo a esta entrada ya que explica la forma de acelerar la carga en un blog. El tamaño de la imagen no afecta demasiado, al no ser que se trate de un archivo con un tamaño de 12MB por ejemplo.

piXel dice...

OK la voy a mirar.. y lo de texto de imagen si lo vi, no se porque aparece fuera de lugar, no como en el ejemplo..

las imágenes no son grandes.. unos pocos k..

Gracias.

Jaime Trujillo Escobedo dice...

Pixel, había pensado que eliminar la descripción en las imágenes sería lo mejor ya que será complicado hacer que pueda visualizarse correctamente.

Pela dice...

De 10 esto, y si quiero poner 2 galerías?, una debajo de la otra?, porque tengo unas imágenes "verticales" y otras "horizontales"..... ;)

Jaime Trujillo Escobedo dice...

Pela, prueba a incluir el segundo código una segunda vez, bajo el anterior. Inserta la dirección de cada imagen y comprueba que ambas galerías funcionan correctamente. En muchos casos, al incluir una segunda galería el diseño se estropea un poco (por lo que es necesario hacer una prueba).

Pela dice...

Bien, haré una prueba, gracias.:)

Jaime Trujillo Escobedo dice...

Ya me contarás entonces, Pela. ¡Saludos!

Carlos Segales dice...

ES BUENISIMO ESTE GADGET, GRACIAS....

Abel3D dice...

Un saludo Jaime, una pregunta, esta galeria solo es para gadgets del sidebar? o se la puede poner en una entrada. Y en caso de poder ponerla en la entrada, como se lo hace? ponemos el todo el codigo en el HTML de la entrada?, saludos.

Jaime Trujillo Escobedo dice...

Abel3D, me temo que todo dependerá de la plantilla que utilices. En ocasiones, la galería funciona sin problemas al incluir el código directamente en el cuerpo de una entrada (plantilla mínima por ejemplo) aunque esto podría presentar problemas si la plantilla es perteneciente a las nuevas que ofrece blogger en su diseñador.

Prueba a incluir el HTML en una entrada y envíame su dirección en caso de obtener algo inesperado.

APEA dice...

Hola, Jaime.
Lo he puesto en una entrado pero el texto no me funciona y no consigo centrarlo.
El texto me da igual, pero me gustaría centrarlo.
Blog de APEA
Muchas gracias, como siempre.
Eres la leche.

Jaime Trujillo Escobedo dice...

Apea, esta galería no funcionará en una entrada, o, al menos, no mostrará todas sus funciones.

Prueba a leer el tutorial acerca de una galería de imágenes en tus entradas.

Si necesitas cualquier otra cosa avísame.

Ser Mejor dice...

Hola, Jaime.
Gracias por tu aportes.
Tengo problemas con este SLIDER la imagenes no se centran en el ,son de mayor tamaño.gracias.
http://sermejorlibros.blogspot.com/

Jaime Trujillo Escobedo dice...

Te comento que tras acceder a tu blog no encontré la galería, Ser Mejor. Debes instalarla para que pueda comprobar el error.

Alexandra dice...

hola Jaime
estoy intentando hacer un blog para mi nueva empresa y queria poner una galeria de fotos. Mi duda es, como pongo la direccion de las fotos? son fotos mias y las tengo en el ordenador, pero no encuentro ninguna direccion. Muchas gracias

Jaime Trujillo Escobedo dice...

Alezandra, en primer lugar me gustaría recomendarte esta plantilla pues permite (creando un segundo blog) almacenar una inmensa cantidad de imágenes en su interior, presentándolas de una manera cómoda y profesional.

Revisa esta entrada para alojar correctamente las imágenes en tu blog. En este otro artículo explico la manera de obtener la URL o dirección de cualquier imagen.

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