JSFiddle - React, Tailwind, and code Playground

by doug65536

HTML

<img src="http://images2.wookmark.com/293563_wookmark.jpg"/>
<button id="img1">Image 1</button>
<button id="img2">Image 2</button>
<button id="img3">Image 3</button>

JavaScript

$(function() {
    var images = [
        "http://images.wookmark.com/293563_wookmark.jpg",
        "http://images2.wookmark.com/294448_wookmark.jpg",
        "http://images.wookmark.com/294191_wookmark.jpg"
    ];
    function load_and_fade_in(elem,src,alt,title,done) {
        var newimg;
        
        function load_finished() {
            elem.replaceWith(newimg);
            newimg.fadeIn(done);
        }
        
        newimg = $('<img>');
        newimg.one('load', load_finished);
        newimg.attr('src', src).attr('alt', alt).attr('title', title);
        newimg.hide();
    }
    
    $('#img1').on('click', function() {
        load_and_fade_in($('img'), images[0], 'alt', 'title', function() {});
    });
    $('#img2').on('click', function() {
        load_and_fade_in($('img'), images[1], 'alt', 'title', function() {});
    });
    $('#img3').on('click', function() {
        load_and_fade_in($('img'), images[2], 'alt', 'title', function() {});
    });
});