JSFiddle - React, Tailwind, and code Playground

by Brian Dukes

HTML

<ul class="gallery">
    <li><a href="http://placekitten.com/g/200/300"><img src="http://placekitten.com/50/75" alt="dandelions" /></a>
    <li><a href="http://placekitten.com/g/300/200"><img src="http://placekitten.com/75/75" alt="ice cream dandelions" /></a>
    <li><a href="http://placekitten.com/g/201/300"><img src="http://placekitten.com/75/50" alt="ice cream tiger" /></a>
        <li><a href="http://placekitten.com/g/200/301"><img src="http://placekitten.com/50/75" alt="mammoth" /></a>
</ul>
        
        <div id="image-wrap">
            <img id="big-image" src="/images/intro.png" alt="click me!"/>
            <h2>Click to See!</h2>
        </div>

JavaScript

$('.gallery a').click(function(event) {
    event.preventDefault();
    var $link = $(this),
        $image = $link.find('img');
    
    $('#big-image').attr('src', $link.attr('href'));
    $('#image-wrap h2').text($image.attr('alt'));
}).first().click();