JSFiddle - React, Tailwind, and code Playground

by jim ulle

HTML

<img id="br_img" src="http://media.mt.com/dam/checkweighing/products/x-serie/easy-belt-change.png" />
<ul>
    <li class="swap" data-img="http://media.mt.com/dam/checkweighing/products/x-serie/checkweighing-sorting-options.png">1</li>
        <li class="swap" data-img="http://media.mt.com/dam/GARVENS2/gui/moods/x-series-checkweigher-mood-1010x260.jpg">2</li>
        <li class="swap" data-img="http://media.mt.com/dam/GARVENS/Webinar_images/Webinar_MID_thumb.jpg">3</li>
</ul>

JavaScript

var object;
$('.swap').click(function(){
    object = $(this);
    $('#br_img').fadeOut(300, function(){
        $('#br_img').attr("src",object.attr("data-img")).fadeIn(300); 
    });
});
// this one jQuery function would set up the elements for all 48 of your portfolio items (no need to duplicate it 48 times) as long as the image URLs are stored in the data-img HTML attributes