JMiur [E]

Esta es una galería de imágenes muy simple que nos muestran en alistapart.com y que se basa en un script muy pequeño que podemos agregar en cualquier parte de la plantilla, por ejemplo, antes de </head>:
<script type="text/javascript">
function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('imgContenedor').src = whichpic.href;
if (whichpic.title) {
document.getElementById('imgDescripcion').childNodes[0].nodeValue = whichpic.title;
} else {
document.getElementById('imgDescripcion').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}
return false;
} else {
return true;
}
}
</script>
Para usarlo, debemos agregar tres partes:
  • una lista de enlaces donde el atributo href contendrá la URL de la imagen y el atributo title el texto optativo a ser mostrado
  • un bloque o una etiqueta con un ID específico (imgDescripcion) donde se mostrará el texto
  • una imagen inicial con un ID (imgContenedor) queserá la que vaya cambiando cuando hagamos click
Hablo de tres partes porque cada una de ellas puede estar en cualquier orden, dependerá de la forma en que se nos ocurra mostrarlo. Por ejemplo:
<ul>
<li><a onclick="return showPic(this)" href="URL_imagen1" title="texto_imagen_1">1</a></li>
<li><a onclick="return showPic(this)" href="URL_imagen2" title="texto_imagen_2">2</a></li>
<li><a onclick="return showPic(this)" href="URL_imagen3" title="texto_imagen_3">3</a></li>
</ul>

<div id="imgDescripcion">el texto inicial</p>

<img id="imgContenedor" src="URL_imagenInicial" />
Este es un ejemplo concreto con algunas variantes, incluyendo propeidades de estilo:

Galería de imágenes


<style>
div#ejemploGaleria {
background-color: #123;
border: 3px solid #234;
margin: 0 auto;
padding: 10px;
width: 480px;
}
span#imgDescripcion {
color: #ABC;
float: left;
font-size: 18px;
width: 250px;
}
ul#imgListaEjemplo{
float: right;
margin: 0;
}
ul#imgListaEjemplo li {
display: inline;
padding: 0 5px;
}
ul#imgListaEjemplo li a {
font-size: 16px;
}
img#imgContenedor{
margin-top: 10px;
}
</style>

<div id="ejemploGaleria">
<span id="imgDescripcion">Galería de imágenes</span>
<ul id="imgListaEjemplo">
<li><a onclick="return showPic(this)" href="URL_imagen1" title="Esta es la primera imagen">1</a></li>
<li><a onclick="return showPic(this)" href="URL_imagen2" title="Esta es la segunda imagen">2</a></li>
<li><a onclick="return showPic(this)" href="URL_imagen3" title="Esta es la tercera imagen">3</a></li>
<li><a onclick="return showPic(this)" href="URL_imagen4" title="Esta es la última imagen">4</a></li>
</ul>
<img id="imgContenedor" src="URL_imagenInicial" /></div>

56 comentarios:

P@lm0 Sempai  

muy bueno, y no habria forma de agregarle para poner una pequeña descripcion de la imagen

Responder
Mar  

Simple y preciosa. Me llevo los datos. Cómo me hace jugar, JMiur.
;-)

Gracias

Responder
Graciela  

JM lo aplicaré con los mimos que me regalan, se puede poner en la sidebar no?...solo cambiar el tamaño de la galería?...:D...besitos!!!

Responder
Σ=o) Pau  

Es preciosa, me la llevo para tenerla presente, me encantan estas cosas y como dice Graciela sirve para los mimitos!!! :D

besos ronroneados y feliz semana :)

Responder
JMiur  

P@lm0 Sempai: Las imágenes tienen una descripción. Fíjate en el ejemplo. Va en el TITLE.

MAr: Pués eso no es nada malo :D

Graciela, Pau: Sí, funcionará en cualquier parte, incluyendo la sidebar, no van a tener problemas.

Responder
Graciela  

bien JM estaré trabajando en ello :D

Responder
Jessica  

Esto está fantástico, JMiur! Voy a ver si lo uso en mis entradas en vez del ibox. :D Gracias!

Responder
Graciela  

Tesoro como siempre preguntando: la parte que corresponde a la cajita vá dentro de la plantilla???

Responder
Anahí  

Me gusta, pero no lo puedo usar porque ahora tengo el monitor en estado "daltónico". Tengo que esperar a que se le acomode el chip... :P

Responder
JMiur  

Graciela: En la plantilla o en un elemento HTML que agregues. Creo que est último es lo más fácil.

Anahí: ¿Daltónico?" ¿Has vuelto a los viejos sistemas de 4 colores? :D Espero que se solucione pronto.

Responder
Marcos Uribe Verdugo  

Muchas gracias por la galería y el ejemplo.
Como dato, la carga de las imágenes no fue inmediata. Mi conexión hacia la visualización de cada imágen demoró unos 10 segundos, y al hacer clic en los números (1.2.3.4), sólo me aparecia inicialmente la primera imágen. Después de u momento, se abrió la imágen requerida. Entiendo que el problema es de la velocidad de mi red.

No estoy criticando el aporte, sino sólo que se tenga esa consideración para las personas que lo van a ocupar en sus blogs.

Muchas gracias como siempre y saludos a todos!!!

Responder
JMiur  

Eso pasará siempre con cualquier tipo de galería o con las imágenes colocadas manualmente. Sólo tiene una solución psoible: precargar las imágenes previamente pero, si son muchas, el tiemp ode carga de todo el sitio aumentará en la misma proporción.

Responder
Walter  

Como haria para poner las viñetas todas una tras de otra en fila no que me salga en columna, muchas gracias por ayudarme. Mi blog.Muchas gracias

Responder
JMiur  

¿Y para qué voy a "explicarte" ? ;)

Responder
Base Marcos Paz  

Me gustaria saber como hago para que la galeria de imagenes me aparezca enmarcada dentro de un recuadro similar al que utilizaste. Desde ya, gracias.

Responder
JMiur  

En el CSS de ejemplo lo dice:

div#ejemploGaleria {
background-color: #123;
border: 3px solid #234;
margin: 0 auto;
padding: 10px;
width: 480px;
}

border: 3px solid #234; es el recuadro

Responder
NORMIS  

Hola si me pudieras ayudar JMiur, ya puse el código tal cual lo pusiste arriba pero me sale así:
http://fotos.subefotos.com/cefe326587297f68018f6c177e85bf69o.jpg, no se ve el recuadro que tienes abajo azul. ¿Por qué?
:(

Responder
JMiur  

Normis:
Tendría que ver es código funcionando online, lo más probable es que haya un error de sintaxis, que falte un punto y coma, un espacio o un caracter erróneo.

Responder
Analía Alvado  

Holaaaaaaaa, ahora vengo por este truco que me ha llamado todo el día ¿no pensaste alquilar algún cuartito, c/cocina, silla y baño, para que pueda mudarme así no viajo tanto?

:D

Responder
JMiur  

No, no lo pensé :D

Esta es una alternativa para eso que me comentabas de las imágenes aunque, si se trata de tener algo que pueda funcioanr siempre, en cualquier post, lo mejor es un script con una ventana modal.

Responder
Analía Alvado  

¡¡Hola!!! No pensé que te encontraría… ahora a mi cuaderno amiguito tengo que sumarle “¿script con ventana modal?” y escribir cien veces: “debo hacer el tutorial de Vagabundia”

Te cuento rapidito: el blog p/fotos que elegí parece no aceptar el LighWindow que me pasaste, pues terminados de cargar los archivos, éstos, da la sensación que afectaron el sidebar y quedó frenado… Igual no es el punto, dado que estoy tan desmoralizada que ni la tabla del dos me saldría en este momento… Lo bueno, que es real y existe en todo lo que hago, es que cada fracaso me lleva a reflexionar con las analogías que se desprenden de c/uno de ellos. Y esto es lo que me pasa aquí adentro: lo que encuentro o me encuentra es para mi desarrollo personal y no para el blog que trato de adornar y eso se ha tornado tan adictivo como absurdo y maravilloso.

Volviendo a la galería que busco y me esquiva, lo que muestra NORMIS es lo que me pasó a mí cuando cargué los códigos y las imágenes, aunque debo reconocer que a mí me salió mucho peor que en el ejemplo mostrado.

Bueno eso, que volví para mirar dónde estaba mi error y me puse a escribirte. En síntesis, mis fotos ya están amarillas de tanto esperar ese álbum que les prometí…

Y me voy a tomar unos mates y… ¡¡¡¡¡¡ya sé lo qué es un script con ventana modal!!!!!!!!

Responder
JMiur  

Respondo lo mismo, debería ver el ejemplo fincioandno. Por ejemplo si la plantilla usa scripts incompatibles, no funcioanará y deberás usar otras alternativas. Hay para todas las librerías pero, habría que ver si ese es el problema o no.

Responder
La hormiguita  

Estoy aprendiendo , los slide o galerias... así que perdón por preguntar tanto...el script va antes del cierre del head, ok.El segundo código,lo de las listas ul, donde va? y el tercero código style donde va Plantilla ? entrada? ???? :$
gracias.

Responder
JMiur  

Igaul euq en el caso del otro donde te contesté, el script antes de </head> y el HTML en donde quieras que se muestre. Siempre, si es un post, desbes escribir esa parte en una sola línea.

En general, tods siguen el mismo esquema.

Responder
ineedyourshelter  

me re ayudó! gracias

pero tengo un problema
quiero poner un link a una url externa y no se como,
o sea, la img cuando ya aparece en grande, que ahi tenga el link en esa img en grnde, pero no se como separar a esa img sola
si con alguna isntancia, script, la verdad no entiendo
alguna ayudita? :$

gracias

Responder
JMiur  

ineedyourshelter:
En ese caso habría quecrear o usar un script totalmente diferente porque no sólo debería cambairse la URL de la imagen sino la URL del enlace.

Responder
La hormiguita  

Hola, buenas noches... bueno una pregunta???? como hago si quiero poner dos galerias en una entrada... porque lo hice y se mezclan las fotos me sale la uno de la segunda galería en la primera de la galería uno??? Por lo demás salen requetebien.Se que tengo que cambiar algún nombre, pero no se cual de todos.
Gracias :)

Responder
JMiur  

PAra eso, deberías repetir todo y ponerle a ambas, IDs diferentes; tanto en el HTML como en el script así que este último, también debe repetirse.

Responder
La hormiguita  

Trate de poner dos script en la plantilla y me dice error... sale algo de tag head esta mal, pero me fije y estaba todo bien, entonces dije bueno voy a poner una sola con mas fotos y listo y repeti la lista eso sale bien, se ven las imágenes, pero los números de las fotos no se agregan a continuación de la fila, me quedan abajo y en columna.... ya me parecía demasiado fácil :(( Se puede poner mas de 4 fotos? ¿ Como hago?
Gracias por todo

Responder
JMiur  

Puede ponerse cualquier cantidad, no hay restricciones; ¿tienes un ejempl oque pueda verse?

Responder
La hormiguita  

Hola... ya pude arreglar lo de poner mas cantidad, gracias... revisé y se me había chispoteado /ul , eso lo arreglé... pero insití en poner dos... eso también funcionó, no me dió error... pero no se como diferenciar los dos script y me sale todo en la primera galería...
lo que veo es que cuando el código del script empieza a funcionar se modifica y queda : con #39 en varios lugares....
Pero me queda en las dos iguales y no se como o donde cambiar.
Gracias nuevamente.

Responder
JMiur  

Cambia todo, incluso la función; por ejemplo, si una se llama:
function showPic (whichpic)
que la otra se llame:
function showPicDOS (whichpic)

Responder
La hormiguita  

Ya salíó.... muchísimas gracias..... quedo muy bien!!!!! :)
Ahora voy hacer la del libro... espero me salga de una...!!!!
:)

Responder
JMiur  

Bien hecho :D

Responder
Mundo Online  

Hola jimur estube buscando mucho una galeria de imagenes q me gusto mucho de una pagina y porfin encontre una pagina donde esta la galeria los scripts y hasta como hacerla pero como soy medio tarugo no supe como hacerle y ps queria ver si me hechabas una mano y de paso pones otra entrada en tu blog aqui te dejo el la pagina: http://spaceforaname.com/galleryview#download

Responder
JMiur  

Lo veré pero no me comprometo a nada.

Responder
Amador López Criado  

¡Genial! Después de algunos ratos trasteando y con pequeños problemas ha salido. Gracia maestro por tus lecciones. Me gusta lo de poder añadir una pequeña descripción. Felices sueños.:)

Responder
JMiur  

Me alegra que sirviera, Amador.

Responder
Amador López Criado  

Hola J. Miur. He estado leyendo los comentarios de La hormiguita ya que al poner dos galerías, aunque en distintas entradas, tengo el mismo problema. Aunque sea en distintas entradas ¿es necesario cambiar las IDs incluso de script (lo que obligaría a repetirlo) o existe otra solución? De nuevo gracias por tu tiempo.

Responder
JMiur  

Efectivamente,con este modelo, los IDs deben ser diferentes así que deben duplicarse las cosas.

Responder
Pedro  

Hermano gracias por haber publicado este contenido, me fue de ayuda ya que he buscado en la red algo sobre este tema y me encontré con este blog, mil gracias al creador y a todos los que han comentado y les gusta trabajar y aprender cada día en este medio.. soy ingeniero y buenos todos los días sigo conociendo cosillas, comparto que el mejor conocimiento se pule y crece solo en la practica..

Responder
JMiur  

Gracias por el comentario, Pedro.

Responder
Naranjita...  

JMiur, fue un error mío lo que hacía que se liara la galería al abrir los comentarios, ya quedó solucionado. Gracias por compartirla, es la que he logrado trabajar sin problemas, y ya mi favorita, (soy bien torpe en estas cosas)

Saludos,

Ann

Responder
Lucas  

Hola!
Quiero poner dos galerias seguidas en una misma pagina. La primera funciona bien, pero la segunda me redirige las imagenes al contenedor de la primer galeria!

como pueod hacer?

Gracias desde ya!

Responder
JMiur  

Sí. Psará eso porque así está pensada; utiliza IDs y si dos objetos tienen el mismo ID, sólo funcioanrá en uno.

Lorena Torres  

muchas gracias es muy util este ejercicio necesito ayuda
la imagen me sale en otra pagina y no en el cuadro de galeria como el ejemplo a que se debe?

JMiur  

Tendría que ver tu ejemplo para responderte.

Responder
Jesus Apaza  

hola buenos dias te cuento que lo realice pero cuando ago click para ue me aparezca una imgen en los numero me aparece en toda la pantalla

JMiur  

Debería ver tu ejemplo.

Responder
Gerardo Gallo  

Hola, te hago una consulta, puse este codigo en mi web para hacer una galería de imágenes, pero cuando quiero cambiar la foto esta se abre en una nueva ventana, sabrás que puedo estar haciendo mal?

Responder
Gerardo Gallo  

span style='position:absolute;z-index:92; left:28px;top:280px;width:524px;height:350px'>

img id="imgContenedor" width=524 height=350 src=image1117.jpg v:shapes="_x0000_s1338"/span>

span style='position:absolute;z-index:93; left:588px;top:280px;width:119px;height:80px'
a onclick="return showPic(this)" href="sky8.jpg" title="texto_imagen_1">img width=119 height=80 src=image1118.jpg v:shapes="_x0000_s1339">/a/span>

JMiur  

Tal como está escrito.el código es confuso. Algo que no se muestra es qué hace la función showPic() para saber como maneja el atributo href de ese enlace. Tal vez:

onclick="showPic(this); return false;"
o:

href="javascript:showPic(this)"

o simplemente, no usar un enlace sino la etiqueta IMG:

<img onclick="showPic(this);" width="119" height="80 src="image1118.jpg" v:shapes="_x0000_s1339" />

Responder
Ferticidio  

Funciona de maravillas!
Es justo lo que necesitaba!!!

Gracias!

Responder
Adrian Escudero  

Hola necesito ayuda poruqe no me salen las FOTOS?

JMiur  

¿Cómo puedo saberlo sin saber cuál es tu ejemplo? Revisa lo que has hecho.

Responder
eduardo  

Gracias!

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

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