Cambiar texto al hacer click en imagen

[croquemonsieur]

Hola a todos!
He buscado y buscado la respuesta a mi duda, pero no soy capaz de dar con una solución. Os cuento:

Tengo una galería de imágenes (por llamarlo de alguna manera) Cuando pincho sobre una imagen ésta se hace grande y el resto se quedan en miniatura. Me gustaría que cada imagen tenga un pie de foto y lo que quiero es que el pie de foto cambie con cada imagen

He pensado en poner muchas etiquetas <p> superpuestas y mediante javascript mostrar cada una cuando corresponda. Pero me imagino que tiene que haber una manera mejor y más elegante de hacerlo.
¿qué me decís?

Gracias!!!

[Alexis88]

Podrías utilizar un pseudo-atributo para guardar el texto, de esta manera, cuando des clic a cualquier imagen, tomas dicho valor y lo muestras en el elemento objetivo.

Código HTML:

<img src = "imagen1.png" class = "galeria" data-texto = "Texto 1" />
<img src = "imagen2.png" class = "galeria" data-texto = "Texto 2" />
<img src = "imagen3.png" class = "galeria" data-texto = "Texto 3" />
 

Código Javascript:

[].forEach.call(document.querySelectorAll(".galeria"), function(img){
    img.addEventListener("click", function(){
        document.querySelector("#id_objetivo").innerText = this.dataset.texto;
    }, false);
});
 

Saludos

[croquemonsieur]

Hola Alexis
Gracias por la respuesta. Seguro que esa es la solución, lo que pasa es que javascript no se me da tan bien (o no sé tanto) y me cuesta entenderlo. Así que si no te importa te cuento mi duda y si te parece me cuentas :)


Veo que el texto ("texto1" "texto2"...) Está dentro de las imágenes. No sé si esto es exactamente lo que quiero. Yo trato de que al pinchar distintas imágenes (que en mi caso son etiquetas <a>) el texto que hay en otra etiqueta <p> cambie. ¿Con tu solución pasa esto?


Creo que es solo eso. Muchas gracias!!

[Alexis88]

Prueba con lo que te expliqué y dinos cómo te fue.

Saludos