JSFiddle - React, Tailwind, and code Playground

by wZVanG

HTML

<div id="galeria">
<ul id="imgLista">
<li><a class="active" href="images\1_castillo.jpg" title="Esta es la primera imagen">1</a></li>
<li><a href="images\2_castillo.jpg" title="Esta es la segunda imagen">2</a></li>
<li><a href="images\3_castillo.jpg" title="Esta es la tercera imagen">3</a></li>
</ul>
</div>


<di id="imgDescripcion"><span></span></div>

<div><img id="imgContenedor" src="images\1_castillo.jpg" width="729" height="525" /></div>

CSS

.active{background:tomato}

JavaScript

function showPic(event, index){

    document.getElementById('imgContenedor').src = this.href;
    document.getElementById('imgDescripcion').childNodes[0].innerText = this.title || this.innerText;
 
    links(function(){
        this.classList.remove("active")
    });
    
    this.classList.add("active");
    event.preventDefault();
}

function links(callback){
    var contenedor = document.getElementById("galeria")
    , lista = contenedor.getElementsByTagName("a");
    for(var i=0; i<lista.length; i++) {
        callback.call(lista[i], i);
    }
    return lista;
}

document.addEventListener("DOMContentLoaded", function(event) { 
    links(function(i){
        this.onclick = function(event){
            showPic.call(this, event, i);
        }
        if(this.classList.contains('active')){
            showPic.call(this, event, i);
        }
    });
});