JSFiddle - React, Tailwind, and code Playground

HTML

<a class="dirLink" imgSrc="img1.jpg" href="#">img1.jpg</a><br />
<a class="dirLink" imgSrc="img2.jpg" href="#">img2.jpg</a><br />
<a class="dirLink" imgSrc="img3.jpg" href="#">img3.jpg</a><br />
<a class="dirLink" imgSrc="img4.jpg" href="#">img4.jpg</a><br />
<a class="dirLink" imgSrc="img5.jpg" href="#">img5.jpg</a>

JavaScript

var dirLinks = document.getElementsByClassName("dirLink"),
    iframe = document.getElementById("tmpImg");

//showDir.addEventListener('click', showDirContent, false);
//showImgs.addEventListener('click', showImgsContent, false);

var bindEvent = function(intId){
		var link = dirLinks[intId];
    link.onclick = function () {
        updateIframeSource(link.getAttribute("imgSrc"));
    }
}

for(var i = 0; i < dirLinks.length; i++) {
    bindEvent(i);
}

function updateIframeSource(source) {
    iframe.src = source;
}