The vanilla-js version will not be so different from the jQuery version. If you add a click listener with addEventListener
, the clicked element will be available as this
:
var large = document.getElementById('gallery').firstChild;
// another option:
// var large = document.querySelector('#gallery img');
var thumbs = document.getElementsByClassName('thumbs');
// another option:
// var thumbs = document.querySelectorAll('.thumbs');
for(var i=0; i<thumbs.length; i++) {
thumbs[i].addEventListener('click', function(e){
large.src = this.getElementsByTagName('img')[0].src;
}, false);
}
You can use a single event handler on your <ol>
, instead of one per <li>
. This example assumes a thumbs-container
class on the <ol>
:
var container = document.querySelector('.thumbs-container');
container.addEventListener('click', function(e){
large.src = e.target.src;
}, false);
Be aware that my code examples need a few tweaks to work cross-browser, particularly for IE<=8.