JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div id="tabs1-ext">
<section class="gallery-viewport-ext">
        <ul>
            <li><a href="_includes/images/slide-1.jpg"><img src="_includes/images/slide-1.jpg" alt="image" /></a></li>
            <li><a href="_includes/images/slide-2.jpg"><img src="_includes/images/slide-2.jpg" alt="image" /></a></li>
            <li><a href="_includes/images/slide-3.jpg"><img src="_includes/images/slide-3.jpg" alt="image" /></a></li>
            <li><a href="_includes/images/slide-1.jpg"><img src="_includes/images/slide-1.jpg" alt="image" /></a></li>
            <li><a href="_includes/images/slide-2.jpg"><img src="_includes/images/slide-2.jpg" alt="image" /></a></li>
            <li><a href="_includes/images/slide-3.jpg"><img src="_includes/images/slide-3.jpg" alt="image" /></a></li>
        </ul>
        <a id="simplePrevious"><img src="_includes/images/larr.png" alt="Left Arrow" /></a>
        <a id="simpleNext"><img src="_includes/images/rarr.png" alt="Right Arrow" /></a>
    </section>

CSS

#big-image {
    width: 200px;
    height: 200px;
    background: #e1e1e1;
    display: none;
}

JavaScript

$('<div id="big-image"><img src="" alt=""> <div id="close">Close</div></div>').appendTo('body');

var bigImage = $('#big-image');

$('.gallery-viewport-ext li a').on('click', function ( e ) {

    e.preventDefault(); 
    
    var self = $(this);
        
    bigImage.find('img').attr('src', self.attr('href') );

    bigImage.show();

});


$('#close').on('click', function() {

    bigImage.hide();
    
});