I'm trying to hyperlink an image within this array... Having some trouble

Question

Here is my code:

var images = [
'images/gustav-klimt.jpg',
'images/woman-looking-forward.jpeg',
'images/snowy-landscape.jpg'
];

var num = 0;
function next() {
var slider = document.getElementById('slider');
num++;
if(num >= images.length) {
num = 0;
}
slider.src = images[num];
}
function prev() {
var slider = document.getElementById('slider');
num--;
if(num < 0) {
num = images.length-1;
}
slider.src = images[num];
}

The slider functions well, but I want the images to be hyperlinked too. I've googled everywhere and havent found an applicable solution.
I thought this would work:

var images = [
'<a href='#'><img src='images/gustav-klimt.jpg'/></a>
];

but still no luck..

Answer 1

@Franklin Sami

Yes and... no ;P

Without your whole code (meaning also html structure at least), it's more difficult to answer ^^

Anyway this function works for your purpose, even you can get it more simple by hard coding the link element, rather than testing if exists and adding it if not, just updating its 'href' attribut if yes:

var images = [
'https://www.entreprises.gouv.fr/files/files/ESPACE-EVENEMENTIEL/SEMAINE-INDUSTRIE/img/peinture.jpg',
'https://www.4murs.com/system/generes/cms/000/066/131/2070681567_1x/66131-peintures-couleurs.jpg?1446558423',
'http://www.atelier-des-peintres.fr/img/bandeau/peinture-ecologique.jpg'
];

var links = [
'#',
'#',
'#'
];

function imgLink(target,index) {
var i, a = target.parentNode;
if (a.tagName!='A') {
a = document.createElement('a');
i = target.parentNode.replaceChild(a,target);
a.appendChild(i);
}
else i = target;
a.href = links[index];
i.src = images[index];
}

var num = 0;
function next() {
var slider = document.getElementById('slider');
num++;
if(num >= images.length) {
num = 0;
}
// slider.src = images[num];
imgLink(slider,num);
}
function prev() {
var slider = document.getElementById('slider');
num--;
if(num < 0) {
num = images.length-1;
}
// slider.src = images[num];
imgLink(slider,num);
}

... obviously, you doesn't need a second array for 'href' urls if you want the link target the image itself ;)

Answer 2

there are many possible ways.. just for instance u can create a seperate function that assigns a link depending on the source of the image and bind it to its onclick method

Answer 3

Would this be close?

var images = [
'images/gustav-klimt.jpg',
'images/woman-looking-forward.jpeg',
'images/snowy-landscape.jpg'
];

function hyperLinks(){
images[0].href='#';
images[1].href='#';
images[2].href='#';
}