JavaScript - Mostrar imagen según click realizado en imagen pequeña

Val: 7

Mostrar imagen según click realizado en imagen pequeña

Publicado por Beatriz (4 intervenciones) el 30/11/2018 07:46:40

Realizar el js, para que cuando cliquemos en alguna imagen se nos muestre en grande y con su titulo correspondiente.

EL HTML:

<!DOCTYPE HTML>

<html>

<head>

	<meta charset="utf-8">

    <title>Galeria de localitats</title>

	<link rel="stylesheet" href="localitats.css" />

    <script type="text/javascript" src="localitats.js"></script>

</head>

<body>

	<section>

		<h1>Galeria de localitats</h1>

	    <ul id="llistaImatges">

	        <li><a href="imatges/AlcazarL.jpg"  title="Alcázar" >

	        	<img src="imatges/AlcazarXS.jpg"  alt="" width="100" height="105" > </a></li>

	        <li><a href="imatges/salamancaXL.jpg" title="Salamanca">

	        	<img src="imatges/salamancaXS.jpg" alt="" width="100" height="105" ></a></li>

	        <li><a href="imatges/barcelonaXL.jpg" title="Barcelona">

	        	<img src="imatges/barcelonaXS.jpg" alt="" width="100" height="105" ></a></li>

			<li><a href="imatges/palenciaXL.jpg" title="Palencia">

	        	<img src="imatges/palenciaXS.jpg" alt="" width="100" height="105" ></a></li>

			<li><a href="imatges/avilaL.jpg" title="Avila">

	        	<img src="imatges/avilaXS.jpg" alt="" width="100" height="105" ></a></li>

	    </ul>

	    <h2 id="caption">Alcázar</h2>

	    <p><img src="imatges/AlcazarL.jpg" alt="" id="imatge" ></p>

	</section>

</body>

</html>

Valora esta pregunta

Responder

Val: 3.162

Publicado por xve (2100 intervenciones) el 30/11/2018 09:15:37

Hola Beatriz, he eliminado los enlaces de los <a...>, para que no se refresque la página, y te he añadido al final el código javascript...

<!DOCTYPE HTML>

<html>

<head>

	<meta charset="utf-8">

    <title>Galeria de localitats</title>

    <link rel="stylesheet" href="localitats.css" />

    <script type="text/javascript" src="localitats.js"></script>

</head>

<body>

	<section>

		<h1>Galeria de localitats</h1>

	    <ul id="llistaImatges">

	        <li><a href="#"  title="Alcázar" >

	        	<img src="imatges/AlcazarXS.jpg"  alt="" width="100" height="105" > </a></li>

	        <li><a href="#" title="Salamanca">

	        	<img src="imatges/salamancaXS.jpg" alt="" width="100" height="105" ></a></li>

	        <li><a href="#" title="Barcelona">

	        	<img src="imatges/barcelonaXS.jpg" alt="" width="100" height="105" ></a></li>

			<li><a href="#" title="Palencia">

	        	<img src="imatges/palenciaXS.jpg" alt="" width="100" height="105" ></a></li>

			<li><a href="#" title="Avila">

	        	<img src="imatges/avilaXS.jpg" alt="" width="100" height="105" ></a></li>

	    </ul>

	    <h2 id="caption"></h2>

	    <p><img src="" alt="" id="imatge" ></p>

	</section>

</body>

</html>

<script>

var links=document.getElementById("llistaImatges").querySelectorAll("a");

for(let i=0;i<links.length;i++)

//     console.log(i);

    links[i].addEventListener("click",mostrarImagen);

function mostrarImagen()

    document.getElementById("caption").innerHTML=this.getAttribute("title");

    document.getElementById("imatge").setAttribute("src",this.querySelector("img").getAttribute("src"));

</script>

Ya nos comentaras si te sirve!!!

Valora esta respuesta

Comentar

Val: 7

Publicado por Beatriz (4 intervenciones) el 01/12/2018 17:10:02

Gracias!! Pero no funciona.... al clicar no muestra la imagen.. unicamente me sale esto;

Valora esta respuesta

Comentar

Val: 3.162

Publicado por xve (2100 intervenciones) el 01/12/2018 23:35:57

Has revisado la consola, por si hay algún error?
Como ha quedado el código?

Valora esta respuesta

Comentar

Val: 7

Publicado por Beatriz (4 intervenciones) el 03/12/2018 15:43:58

Me dice que no es un objeto, me dice que es nulo en la primera linea de cogido del js;
Gracias

Valora esta respuesta

Comentar

Val: 7

Publicado por Beatriz (4 intervenciones) el 03/12/2018 18:11:51

he tenido que volver a poner los enlaces en la pagina por que tampoco me funcionaba.... en la consola no me saltan errores

Valora esta respuesta

Comentar

cylon.js

No corre en Goolge Chrome