JSFiddle - React, Tailwind, and code Playground

by eccentric_j

HTML

<h1>Big Image</h1>
<img id="big-image" src="" />
<h2>Thumbnails</h2>
<ul class="thumbnails">
    <li><a href="http://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Timba%2B1.jpg/220px-Timba%2B1.jpg"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Timba%2B1.jpg/220px-Timba%2B1.jpg" /></a></li>
    <li><a href="http://upload.wikimedia.org/wikipedia/commons/thumb/2/26/YellowLabradorLooking_new.jpg/260px-YellowLabradorLooking_new.jpg"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/26/YellowLabradorLooking_new.jpg/260px-YellowLabradorLooking_new.jpg" /></a></li>
    <li><a href="http://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Golden_retriever_eating_pigs_foot.jpg/170px-Golden_retriever_eating_pigs_foot.jpg"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Golden_retriever_eating_pigs_foot.jpg/170px-Golden_retriever_eating_pigs_foot.jpg" /></a></li>
</ul>

CSS

/* Example Styles */
#big-image
{
    width: 400px;
    height: 400px;
    background: #000;
    float: left;
    margin-right: 20px;
}
.thumbnails
{
    display: inline-block;
    margin-top: 20px;
}
.thumbnails li
{
    display: block;
}
.thumbnails li img
{
    width: 50px;
    height: 50px;
}

JavaScript

// No conflict wrapper required for use with WordPress
(function($){
    // This could go into wp-content/mytheme/js/custom.js or something like that.
    $(document).ready(function(){
        // .thumbnails refers to any element which has <element CLASS="thumbnails">...
        // In the case of the example I have <ul class="thumbnails">
        $('.thumbnails a').on('click',function(){
            // code in here is only triggered when clicked.
            //#big-image refers to an element with an id of <element ID="big-image" />
            // which in the example is the first <img> tag.
            // Then we set the src property of the big image 
            // to the href of the a tag we are clicking on in the thumbnails.
            // becaause we are ending on the a tag in ".thumbnails a").on('click..
            // the variable "this" refers to the clicked a tag.
            $('#big-image').attr('src', $(this).attr('href'));  
            
            // Note the image linked by the a tag could be completely different
            // from the src in the corresponding img. 
            // So you could have a thumbnail that links to the full sized one.
            // Though I kept it simple on myself for this example.
    
            // make sure to have return false to block the link from just
            // pointing the browser to the url.
            return false;
            // And that's it!                                       
        });
        
        // This following part loads the first image.
        // You may need to replace .thumbnails li:first to something like:
        // .thumbnails tr:first td:first to get the first td of the first row
        // if you have your thumbnails in a table.
        $('#big-image').attr('src', $('.thumbnails li:first').children('a').attr('href') );
    });
})(jQuery);