Galería de Javascript – Imagen principal href change

Acabo de pasar por un tutorial sobre cómo desarrollar una galería de Javascript que cambia la ‘imagen principal’ al hacer clic cuando se hace clic en una de las miniaturas más pequeñas.

El problema que estoy teniendo es que necesito la “imagen principal” para vincular a su propia página individual dependiendo de qué miniatura se está presentando.

Este es mi código hasta ahora:


function changeImage(event){ event = event || window.event; var targetElement = event.target || event.srcElement; if (targetElement.tagName == "IMG"){ document.getElementById("mainimage").src = targetElement.getAttribute("src"); } }

Puedes hacerlo así:

 function changeImage(event){ event = event || window.event; var targetElement = event.target || event.srcElement; if (targetElement.tagName == "IMG"){ document.getElementById("mainimage").src = targetElement.getAttribute("src"); document.getElementById("mainimagelink").href= 'link'+targetElement.getAttribute("data-link")+'.html'; } } 

Tendrás que cambiar el HTML así:

  

Lo que hice fue agregar el atributo y agregar un data-link a las imágenes, poner la página a la que desea vincular eso.
Actualmente, solo usa un número, luego en javascript agrega el enlace? .Html a él:

 document.getElementById("mainimagelink").href= 'link'+targetElement.getAttribute("data-link")+'.html'; 

Simplemente edite la línea anterior para cambiar las páginas.

Demostración de JSFiddle

EDITAR:
En respuesta a su comentario, cambie el html a esto:

  

Y cambie la línea de JavaScript a:

 document.getElementById("mainimagelink").href= targetElement.getAttribute("data-link")+'.html';