Te gustaria tener una galeria de tus imágenes, que funcione como un slide y sin tener que salir de tu web, tus visitantes puedan ver las imágenes en su tamaño real?
Pues aquí tienes esta opcion que te ofrezco, es muy llamativa, ademas de original.
Se trata de un script y un codigo, que poniendolos a trabajar juntos,crean un bonito efecto para todas tus imágenes.
Debes disponer de 2 tamaños de la misma imagen, es decir, debes tener lo que llamamos un tumbanail(algo asi como foto pequeñita) y la imagen en tamaño real.
Lo primero que debes hacer es alojar tus imágenes y copiar las urls correspondientes de cada una. O sea 2 urls por imagen(una de la pequeña y otra de la imagen en tamaño real).
Cuando ya tengas tus urls, vas a pegar este codigo , en el box que dice “TEXTO POR DEBAJO DE LA PAGINA” eso esta en editar diseño/configuraciones avanzadas.
<script type="text/javascript" language="javascript" src="http://acdidita.googlepages.com/lytebox.js"></script> <link rel="stylesheet" href="http://acdidita.googlepages.com/lytebox3.css" type="text/css" media="screen" />
Cuando ya tengas ese script, insertado, vas a preparar este otro codigo con las urls correspondientes.
<a href="aqui url del tamaño real de la imagen" _fcksavedurl="aqui url del tamaño real de la iamgen" rel="lyteshow[tecnoswa]" title="Nombre del slide(eje gaticos)"><img src="aqui la url del tumbanail de la misma imagen" _fcksavedurl="aqui la url del tumbanail de la misma imagen"></a>
Paso a explicarte como configurar el codigo:
Esa linea la puedes añadir cuantas veces quieras en un mismo bloque de imágenes, por ejemplo el codigo que te acabo de dar seria para una sola imagen, pero como imagino vas a insertar muchas mas, pues simplemente agregas esa linea cuantas veces lo necesites en un mismo bloque.
Donde dice es “tecnoswa”un distintivo para cada bloque de imágenes, o sea si este codigo lo vas a volver a usar para otro bloque de imágenes, debes cambiarle el nombre, para que el script sepa que imágenes abrir.
Entonces si vas a añadir por ejemplo 4 imágenes en un mismo bloque, seria mas o menos asi el codigo:
<a href="aqui url del tamaño real de la iamgen" _fcksavedurl="aqui url del tamaño real de la iamgen" rel="lyteshow[tecnoswa]" title="Nombre del slide(eje gaticos)"><img src="aqui la url del tumbanail de la misma imagen" _fcksavedurl="aqui la url del tumbanail de la misma imagen"></a> <a href="aqui url del tamaño real de la iamgen" _fcksavedurl="aqui url del tamaño real de la iamgen" rel="lyteshow[tecnoswa]" title="Nombre del slide(eje gaticos)"><img src="aqui la url del tumbanail de la misma imagen" _fcksavedurl="aqui la url del tumbanail de la misma imagen"></a> <a href="aqui url del tamaño real de la iamgen" _fcksavedurl="aqui url del tamaño real de la iamgen" rel="lyteshow[tecnoswa]" title="Nombre del slide(eje gaticos)"><img src="aqui la url del tumbanail de la misma imagen" _fcksavedurl="aqui la url del tumbanail de la misma imagen"></a> <a href="aqui url del tamaño real de la iamgen" _fcksavedurl="aqui url del tamaño real de la iamgen" rel="lyteshow[tecnoswa]" title="Nombre del slide(eje gaticos)"><img src="aqui la url del tumbanail de la misma imagen" _fcksavedurl="aqui la url del tumbanail de la misma imagen"></a>
Ahora bien, no queremos que nos salga una tira de imágenes, sino que sea algo bien hecho, entonces por ejemplo si vas a colocar un solo bloque con 8 imágenes, como lo hare en este ejemplo, debes colocar entre bloque y bloque,un espacio que podria ser este “p” con sus respectivos cierres, te muestro como quedaria el codigo con el espacio para mostrar 4 imágenes arriba y las otras 4 abajo
<a href="http://blog.educastur.es/libretina/files/2007/10/fotos-gatos.jpg" _fcksavedurl="http://blog.educastur.es/libretina/files/2007/10/fotos-gatos.jpg" rel="lyteshow[tecnoswa]" title="Gaticos"><img src="http://tbn0.google.com/images?q=tbn:xBz25hAe4CPDxM:http://blog.educastur.es/libretina/files/2007/10/fotos-gatos.jpg" _fcksavedurl="http://tbn0.google.com/images?q=tbn:xBz25hAe4CPDxM:http://blog.educastur.es/libretina/files/2007/10/fotos-gatos.jpg"></a> <a href="http://www.esquizopedia.com/wp-content/uploads/2006/11/gatitos.jpg" _fcksavedurl="http://www.esquizopedia.com/wp-content/uploads/2006/11/gatitos.jpg" rel="lyteshow[tecnoswa]" title="Gaticos"><img src="http://tbn0.google.com/images?q=tbn:SK8WO_C3spcdtM:http://www.esquizopedia.com/wp-content/uploads/2006/11/gatitos.jpg" _fcksavedurl="http://tbn0.google.com/images?q=tbn:SK8WO_C3spcdtM:http://www.esquizopedia.com/wp-content/uploads/2006/11/gatitos.jpg"></a> <a href="http://www.damisela.com/web/links/mascotas/gatos/gatos.jpg" _fcksavedurl="http://www.damisela.com/web/links/mascotas/gatos/gatos.jpg" rel="lyteshow[tecnoswa]" title="Gaticos"><img src="http://tbn0.google.com/images?q=tbn:21tZqJtGnqmGHM:http://www.damisela.com/web/links/mascotas/gatos/gatos.jpg" _fcksavedurl="http://tbn0.google.com/images?q=tbn:21tZqJtGnqmGHM:http://www.damisela.com/web/links/mascotas/gatos/gatos.jpg"></a> <a href="http://www.gordon-stewart.co.uk/cats/paintings/cat-face.jpg" _fcksavedurl="http://www.gordon-stewart.co.uk/cats/paintings/cat-face.jpg" rel="lyteshow[tecnoswa]" title="Gaticos"><img src="http://tbn0.google.com/images?q=tbn:6JEwXkQJf4biQM:http://www.gordon-stewart.co.uk/cats/paintings/cat-face.jpg" _fcksavedurl="http://tbn0.google.com/images?q=tbn:6JEwXkQJf4biQM:http://www.gordon-stewart.co.uk/cats/paintings/cat-face.jpg"></a><p> <a href="http://galeria.universia.pr/albums/userpics/gato020.jpg" _fcksavedurl="http://galeria.universia.pr/albums/userpics/gato020.jpg" rel="lyteshow[tecnoswa]" title="Gaticos"><img src="http://tbn0.google.com/images?q=tbn:TXUW9h3HrkXpAM:http://galeria.universia.pr/albums/userpics/gato020.jpg" _fcksavedurl="http://tbn0.google.com/images?q=tbn:TXUW9h3HrkXpAM:http://galeria.universia.pr/albums/userpics/gato020.jpg"></a> <a href="http://images-srv.leonardo.it/progettiweb/laurablog/blog/Shrek%202.%20Gato%20con%20botas.%20Cara%20bonita.jpg" _fcksavedurl="http://images-srv.leonardo.it/progettiweb/laurablog/blog/Shrek%202.%20Gato%20con%20botas.%20Cara%20bonita.jpg" rel="lyteshow[tecnoswa]" title="Gaticos"><img src="http://tbn0.google.com/images?q=tbn:95gxA3kTn9UhXM:http://images-srv.leonardo.it/progettiweb/laurablog/blog/Shrek%25202.%2520Gato%2520con%2520botas.%2520Cara%2520bonita.jpg" _fcksavedurl="http://tbn0.google.com/images?q=tbn:95gxA3kTn9UhXM:http://images-srv.leonardo.it/progettiweb/laurablog/blog/Shrek%25202.%2520Gato%2520con%2520botas.%2520Cara%2520bonita.jpg"></a> <a href="http://www.pusscats.com/Tabby_Cats-Face.jpg" _fcksavedurl="http://www.pusscats.com/Tabby_Cats-Face.jpg" rel="lyteshow[tecnoswa]" title="Gaticos"><img src="http://tbn0.google.com/images?q=tbn:_f41pWhwMoqToM:http://www.pusscats.com/Tabby_Cats-Face.jpg" _fcksavedurl="http://tbn0.google.com/images?q=tbn:_f41pWhwMoqToM:http://www.pusscats.com/Tabby_Cats-Face.jpg"></a> <a href="http://www.anipedia.net/fotos-graciosas/gatos.jpg" _fcksavedurl="http://www.anipedia.net/fotos-graciosas/gatos.jpg" rel="lyteshow[tecnoswa]" title="Gaticos"><img src="http://tbn0.google.com/images?q=tbn:6AbDSN_DtW9A4M:http://www.anipedia.net/fotos-graciosas/gatos.jpg" _fcksavedurl="http://tbn0.google.com/images?q=tbn:6AbDSN_DtW9A4M:http://www.anipedia.net/fotos-graciosas/gatos.jpg"></a>
Si te fijas bien en esta codigo que te acabo de dar(copialo para que lo puedas ver mejor) entre la linea 4 y 5, hay un atributo, ese es el que debes colocar para separar los 2 bloques de imagenes y que no queden todas en una tira larga, el atributo es el de “p” pero no lo puedo escribir, porque comprenderas no se vera, fijate donde te digo y sabras de lo que hablo.
Bien y este seria el resultado, pincha en la imagen para que lo veas en accion, saludos y espero que los disfrutes.
