JMiur [E]

Hace unos días, Darwin me preguntaba cómo hacer una galería de imágenes similar a la utilizada en este post.


No es la primera vez que me lo preguntan y siempre demoré la explicación porque no me parecía demasiado interesante. Es un pequeño script que armé con pedazos de otros ejemplos y que utilizo porque me resulta más cómodo que otros más sofisticados.

Primero que nada, necesitamos el script. Este, lo podemos añadir a la plantilla antes de </head> o crear un archivo externo y alojarlo en algún servidor. En el primer caso, escribimos:
<script language='JavaScript'>
//<![CDATA[
var visorIMGnum=0;
var visorPIC=new Array();

function visorAtras(cual,mtxpics) {
visorPIC = mtxpics
if(visorIMGnum==0) {
visorIMGnum=visorPIC.length-1;
} else {
visorIMGnum --
}
document.getElementById(cual).src=visorPIC[visorIMGnum].src;
}

function visorAdelante(cual,mtxpics) {
visorPIC = mtxpics
if(visorIMGnum==visorPIC.length-1) {
visorIMGnum=0;
} else {
visorIMGnum ++;
}
document.getElementById(cual).src=visorPIC[visorIMGnum].src;
}
//]]>
</script>
En el segundo caso, abrimos el block de notas, copiamos y pegamos el código (todo lo anterior menos las etiquetas <script language='JavaScript'> </script>) y lo guardamos con cualquier nombre y extensión .JS. Luego, lo alojamos en un servidor como Google Pages.

Para utilizar el script, lo cargamos en la plantilla para tenerlo siempre a mano, en un elemento HTML de la sidebar o, como en mi caso, en el post donde lo vamos a utilizar. en todos los casos, escribimos:
<script src="URL_nombre.js"></script>
Donde reemplazamos URL_nombre.js por la dirección URL del archivo.

Ahora, lo que debemos hacer es especificar cuáles son las imágenes a utilizar y precargarlas para que el efecto sea lo suficientemente rápido. Esto, lo hacemos dándoles un nombre cualquiera y estableciendo sus dimensiones. Por ejemplo, supongamos que utilizamos tres imágenes de 200x100:
<script>
var nombrePIC=new Array();
nombrePIC[0]=new Image(200,100); nombrePIC[0].src="URL_imagen1";
nombrePIC[1]=new Image(200,100); nombrePIC[1].src="URL_imagen2";
nombrePIC[2]=new Image(200,100); nombrePIC[2].src="URL_imagen3";
</script>
Por último, el HTML y aquí es donde entra la imaginación de cada uno. Voy a poner todo en una tabla a manera de ejemplo pero las alternativas son muchas:
<table>
<tr>
<td> <!-- primera celda -->
<a onclick="visorAtras('nombreIMG',nombrePIC);return false;" href="javascript:void(0);">
... ENLACE RETROCEDER ...
</a>
</td>
<td> <!-- segunda celda -->
<img src="URL_imagen1" id="nombreIMG" />
</td>
<td> <!-- tercera celda -->
<a onclick="visorAdelante('nombreIMG',nombrePIC);return false;" href="javascript:void(0);">
... ENLACE AVANZAR ...
</a>
</td>
</tr>
</table>
Donde en la primera celda ponemos un enlace que puede ser un texto o una imagen y que ejecuta el script para retroceder en la lista de imágenes.

La segunda celda contiene la primera imagen, la que aparecerá por defecto y tiene un atributo ID con el que identicaremos el bloque.

Y en la tercera celda ponemos el enlace que ejecuta el script para avanzar en la lista de imágenes.

Si se usa una tabla, el esquema es muy variado:


60 comentarios:

Alejandro  

Fenomenal.

:-)

Responder
Gem@  

Hay un pequeño error justo en el código donde se añade la url de las imágenes: <script> algo muy normal cuando convertimos un código y de copiar y pegar se trata ;)

Responder
JMiur  

Es que es un nuevo código, Gem@ ;)

Mentira ... ya lo he corregido :D

Responder
Gem@  

Perfecto. Tengo una pregunta pero voy a buscar la entrada indicada ;)

Responder
JMiur  

Allá vamos ....... ;)

Responder
Quique  

Espectacular! Cada dia me sorpendes mas tio! :)

por cierto lo he aplicado a mi blog (a partir de tu source) y el script funciona cuando tengo 5 fotos pero si le pongo mas no va... se ve la primera imagen pero al darle a la flecha no tira. La verdad es que los veo identicos y no veo el por que no deberia funcionar con mas fotos...

aqui va la muestra:
http://www.viajablog.com/2007/10/tnez-18-recorrido-completo-de-un-viaje.html

Responder
Quique  

http://www.viajablog.com/2007/10/
tnez-18-recorrido-completo-de-un-viaje.html

Responder
Email Urbano  

esta bueno este código, pasaba a saludar...sobre todo cuando se tienen muchas fotos.

Responder
JMiur  

Quique:

No veo motivos para que no funcione con más de 5 fotos. Por ejemplo, en este post hay 12 ¿Puedes colocar en tu prueba un par de imágenes más para poder verlo online?

Responder
Quique  

Solucionado! :) Le di de nuevo y empece de 0. Es lo mejor en estas situaciones y me funciona ahora a la perfeccion, en explorer y en firefox con las fotos que quiera. Es fantastico para un blog de viajes como el mio!

Muchas gracias! Si un dia te pasas por Barcelona te llevo de cenita!

Responder
JMiur  

Me alegro, Quique, debía ser uno de esos pequeños que se nos escapan porque yo tampoco vi errores en tu página :)

Lo de la cena, lo tendré en cuenta ;)

Responder
Roberto Caamaño  

Tengo una duda... En el codigo de las celdas dice solamente el url de la imagen 1. ¿Hay que poner todas las imagenes en una celda?

Responder
Roberto Caamaño  

No se si entendiste lo que quise decir

Responder
JMiur  

Así es, en el código de la tabla sólo va la primera imagen pero, teniendo en cuenta que debe ter un atributo ID que la identificque, que le de un nombre único:

<img src="URL_imagen1" id="nombreIMG" />

El resto de las imágenes se precarga antes con JavaScript, puede hacerse en cualquier parte, en la plantilla o en el post que lo usa pero, siempre antes que la tabla:

<script>
var nombrePIC=new Array();
nombrePIC[0]=new Image(200,100);
...............

Responder
Hervey  

Hola esta galeria me gusta y tengo otra similar que encontre el la web pero aun necesito un atributo mas para la galeria que quiero y ojala me puedas ayudar a agregarselo.
quiero que cada imagen muestre un pequeño comentario de esa miama imagen.
gracias

Responder
JMiur  

Hervey:

Dime donde puedo verla y cuéntamet un poco más sobre ese texto que quieres agregar. Si quieres enviarme un email, no hay problema.

Responder
Hervey  

el script esta aqui http://www.comocreartuweb.com/phpBB2/ftopic5550.html&highlight=
es el mismo que utilizo
no se cual es tu gmail?
gracias por responder
hervey.dominguez@gmail.com

Responder
JMiur  

Ya la veo.

La galería tiene unos efectos de transición entre imágenes que sólo funcionarán en Internet Explorer, en el resto de los navegadores ese efecto no se verá.

De cualquier manera, si lo que quieres es agregar un texto diferente para cada imagen, hay que modificar el script.

Así como hay un array que contiene las imágenes, se requiere otro conteniendo los textos: textos[0], etc.

AQUI he puesto un TXT para que veas el script modificado y el HTML necesario.

Cualquier detalle me avisas. El mail está en la sidebar y en el menú superior hay un formulario de Contacto.

Responder
Hervey  

si funciono lo de los comentarios en las imagenes pero ya no se cargan las fotos algo esta mal en el script y no lo puedo areglar gracias por responder

Responder
Cinthia  

Hola, esta increible esta galeria.

Yo tambien la estoy usando con los comentarios abajo de cada imagen (muchas gracias por ese tip):).

Pero no hayo la manera de como hacerle para que arriba de cada imagen aparezca un titulo que tambien fuera cambiando.

Es decir que estuviera un titulo, la imagen y abajo el comentario.

Bueno me despido y ojala me puedas iluminar...

Responder
JMiur  

Hervey:
Revisa la que has escrito y si la dirección de las imágenes es correcta. El script lo he probado y está en un post en mi blog de pruebas: AQUÍ. No tiene problemas, más allá de las limitaciones que te contaba e un comentarios anterior.

Cinthia:
Eso que quieres, puede hacerse agregando una fila y más datos, es bastante sencillo pero no sé a cual de los scripts te refieres; cualquier cosa, me envías un mail y te digo cómo hacerlo.

Responder
Hervey  

ok pasame porfavor esa galeria en un documento de block de notas porfa
y respecto a la que te puse antes quitale lo de los efectos de transicion de las imagenes solo quiero una galeria que muestre las imagenes que yo quiero y que tenga la funcion de imagen siguiente y la imagen anterior asi como un comentario por cada imagen.
y si no es mucho pedir que al costado derecho de la galeria aparezcan miniaturas de por lo menos 10 o 20 fotografias.
Gracias por su respuesta son muy amables saludos

Responder
JMiur  

Los códigos son estos:
demoGaleria.txt

Lo de los thumbnails debería pensarlo.

Responder
Quique  

Buenas! Parece algo muy simple pero no me sale... A modo de menu en el sidebar desearia que cada imagen direccionara a un link pero no hay manera...

donde se deberia colocar el link para cada una de las imagenes?
nombrePIC[0]=new Image(200,100); nombrePIC[0].src="URL_imagen1";

Responder
JMiur  

Quique:

El script no tiene previsto que cada imagen sea un enlace:
nombrePIC[0]=new Image() y nombrePIC[0].src=""
son las imágenes.

Para que, además, cada imagen sea un enlace, habría que modificarlo y agregarle cosas.

Tal vez, te sirva ver ESTO; es un ejemplo sencillo donde una galería de imágenes incluye enlaces.

Responder
NKR  

Hola JMiur.
Este pequeño script que armaste con pedazos de otros ejemplos y dices que es simplísimo ;me gusta. Yo no sería capaz de armarlo ni con 2 años de preguntas en google. Lo copié(como siempre) y lo puse en el blog. Gracias.

Responder
JMiur  

Para eso está, NKR, para usarlo :D

Responder
catadebrujas  

Hola, acabo de insertar este código, pero parece que no hay manera, y creo que he seguido todos los paso correctamente. ¿Qué sucede que no funciona con normalidad? Un saludo.

Responder
JMiur  

Si el archivo esta alojado en SkyDrive n ofuncionará porque hay un problema con el servicio. Lo mismo ocurre en el post hasta que pueda realojarlo.

Responder
DrMartin  

es posible añadir una descripcion a cada imagen... talvez segun la posicion en el vector ver el indice actual y jalar de otro vector segun el mismo indice una descripcion, pero el otro vector tendria que ser de cadenas de caracteres... ¿como lo hago?

Responder
JMiur  

DrMartin: Posible es, lo que ocurre es que habría que hacer un script nuevo.

Responder
Walter  

Tus expliaciones son demasiados dificiles para muchos.

Responder
JMiur  

Tienes razón, esto es muy difícil, mejor ni lo intentes.

Por cierto, yo no explico nada de nada, sólo comparto lo que aprendo usando la única herramienta que conozco: la paciencia.

Responder
NORMIS  

Hola, otra duda ya utilice el este código para mi galería y todo funciona súper bien, pero ahora mi problema es, (ya estuve investigando pero no encuentro como).
Lo que quiero hacer es que las imágenes que coloque en la galería se redimensionen a un tamaño de la celda que asigne, como tengo varias imágenes de diferentes tamaños se mueve todo desigual y se ve algo feo.

Gracias.

Responder
JMiur  

Tendría que ver el ejemplo pero, si, por ejemplo, le colocas a la celda TD o a la imagen IMG una clase CSS, podrías forzar su redimensión:

td.NOMBRE img {width:300px;height:200px;}
o
img.NOMBRE {width:300px;height:200px;}

Responder
Coalición de Artistas  

Hola JM me interesa mucho tu opinion y hasta donde puedes aportarnos en el desarrollo de un estilo de galeria de fotos para este proyecto,(www.madm.us) dejanos saber. que tipo de script nos recomiendas, ya que seran muchas las fotos que se comenzaran a colocar, incluyendo galerias, etc. saludos

Responder
JMiur  

Lo siento pero n otengo recomendaciones. No soy un profesional del tema y en última instancia cualquier opinión es bastante subjetiva.

Responder
Amador López Criado  

Hola de nuevo. Estoy intentando crear la galería. Pero tengo algunas dudas. ¿Hay algún problema de compatibilidad del script con Prototype + Scriptaculous? En amarillo aparece nombrePIC ¿qué significa? ¿qué tengo que poner ahí? Un saludo y gracias.

Responder
JMiur  

No, no hay problemas de incompatibilidad. Este blog usa Prototype + Scriptaculous.

nombrePIC es el nombre que le darás a ese array de imágenes; cualquier nombre que se te ocurra.

Responder
Amador López Criado  

Más preguntas. En las celdas de la tabla cuando pone 'nombreIMG' ¿a qué nombre te refieres? Y de nuevo en la primera y en la tercera celda aparece nombrePIC ¿Tiene que coincidir con algún nombre de los anteriores, o hay que ponerles algún nombre nuevo? ¿El nombrePIC se muestra en algún lugar de la galería? ¿Y el nombre de las imágenes?
Perdona si te agobio con tantas preguntas, pero es que hay demasiadas cosas que desconozco. Gracias de nuevo. Un saludo.

Responder
JMiur  

id="nombreIMG" el ED es un parámetro que identifica a una etiqueta. Es un nombre cualquiera e irrepetible. Por ejemplo arbolamarillo.

nombrePIC, como dije es el array de imágenes y es otro, por ejemplo: misimagenes

Ninguno de los dos se muestran, son datos necesarios para que el script funcione.

Responder
Amador López Criado  

Hola. Pues pondremos manos a la obra. Estoy observando desde el bancón de mi casa, en Alcalá de Henares (Madrid), los preparativos para la entrega del premio Cervantes, hoy, que se celebra el día del libro. Es maravilloso lo que la palabra, las nuevas tecnología y la gente de buena voluntad aportáis a este mundo para que nos sintamos un poco más felices. Que tengas buen día.

Responder
Manfenix  

Hola JMiur.
Tengo un problema con el centrado de esta galería. Usé <center> y <⁄center>, pero toda la galería se ve desplazada ligeramente hacia la derecha.
No puedo ubicar el error que lo provoca.
No es un defecto importante, pero... yo si lo noto. :O
El problema está en este post: Galería.
Gracias

Responder
JMiur  

Manfenix:
En realidad, está centrada, lo que ocurre es que el ancho disponible de las entradas de tu blog es inferior al ancho de la galería y por eso se desplaza hacia la derecha.

Esa galeria tiene unos 540 pixeles de ancho y la columna de las entradas tiene 562 menos un padding que está en la clase .post de 2em para cada lado.

Para pseudo-centrar la galería, deberías colocarle un margen izquierdo negativo a la tabla.

Responder
Manfenix  

Gracias por la ayuda. :)
Lo resolví dándole un ancho de 400px y alto de 300px a la imagen contenida en la segunda celda de la tabla y funcionó.
Otra vez gracias... ;)

Responder
JMiur  

El alto no importa, mientras el ancho de la galería no supere el total, se verá bien.

Responder
Gerardo  

Hola, para comenzar creo es muy pero muy bueno tu blog. Yo realmente ya en un par de días he sacado provecho, en conocimiento, a lo que en el publicas.

Mi pregunta, lo que necesito saber, es la siguiente: tengo un código en PHP que lee el contenido de un directorio, soy capaz de guardar las imagenes en una variable de arreglo, se podría usar eso para adaptarlo a el script que acá posteas y que sea usado para generar auntomáticamente la galería de imágenes y no de forma estática como está ahora???

Espero que puedas ayudarme, gracias de antemano :)

Responder
JMiur  

Con PHP casi puede hacerse cualquier cosa así que eso no debería tener inconvenientes. No puedo dar detalles al respecto porque desconozco el contexto del que hablas pero no hay problema, si la URL está en un array basta poner cada elemento en el script o en el el HTML:
nombrePIC[0]=new Image(200,100); nombrePIC[0].src="<?php echo $miarray[0]; ?>";
por decir cualquier cosa, claro.

Responder
www.santoverdinegro.com  

Hola GMiur, me esta pasando algo con esta galeria, por ejemplo cundo quiero poner 2 o 3 o 4 galeias en una misma entrada, dado que en dicha entrada viene a ser una seccion fotos, las fotos se intercambian de galeria, por que puede estar psando? y si las ubico en entrdas diferentes no, funcionan bien.
Como siempres gracias por tuayuda GMiur

Responder
JMiur  

Cada galería tiene que tener IDs diferentes; si todas usan el mismo, no funcionarán.

Responder
www.santoverdinegro.com  

Gracias JMiur por tu ayuda, ya lo solucione.
Gracia!!

Responder
Jesús Martinea Garcia  

Hola,

Es posible hacer la galeria sin las flechas laterales, o sea, que haciendo click en la imagen pase a la siguiente imagen.

Llevo tiempo buscando algo asi y no hay manera.

Gracias de antemano.

JMiur  

Todo es posible pero debes usar otro script o modificar este de modo sustancial.

Responder
ligre le  

hola y muchas gracias! me sirvio!

tengo una unica duda.. con esta galeria podria agregarle ir canbiando de fotos con los botones izquierda derecha?

JMiur  

Tiene dos botones que cambian las imágenes.

ligre le  

si tiene 2 botones para eso.
aun asi tenia esa duda jajaja bueno gracias! por tu respuesta! JMiur!
y gracias por compartir esta galeria de imagenes!

bueno y una ultima pregunta sabes alguna forma de incluirle alguna orden para que
las imagenes que baya incluyendo en la carpeta se vallan incluyendo en la galeria automaticamente con auto increment o algo asi ?

aproposito uso el notepad++

JMiur  

¿Que carpeta?

ligre le  

la carpeta que contiene las imagenes de la galeria en este caso una carpeta local.

C:\Users\ligre\Desktop\galeria\img

JMiur  

Esa es una carpeta local; ninguna página web funcionara utilizando archivos locales; deben estar alojados en la web.

Si se trata de un demo donde luego, las imágenes serán alojadas en una carpeta similar en algún hosting propio, debes usar un lenguaje como PHP ASP o cualquier otro que se ejecute en el servidor ya que JavaScript no puede acceder a esos datos salvo que el servidor los envie ante algún requerimiento específico.

ligre le  

ah bueno lo are con php.
gracias! por responderme JMiur

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR