JSFiddle - React, Tailwind, and code Playground

by tweissin

HTML

<!-- Incarnation #1: this works with multiple images -->

<div id="1" class="thumbnail">
    <div class="image">
        <img src="http://lorempixel.com/100/100/animals/0" data-n="1" class="loaded"/>
    </div>
    <h1>title</h1>
    <p>description</p>
</div>

<div id="2" class="thumbnail">
    <div class="image">
        <img src="http://lorempixel.com/100/100/sports/0" data-n="1" class="loaded"/>
    </div>
    <h1>title</h1>
    <p>description</p>
</div>

CSS

.thumbnail{
    width:100px;
    padding:10px;
    webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.4);
}
.thumbnail .image, img{
    width:100px;
    height:100px;
}
.thumbnail .image{
    overflow:hidden;
    position:relative;
}

.thumbnail .image img{
    position:absolute;
    top:0;
    left:0;
    display:none;
}

.thumbnail .image img:first-child{
    display:block;
}
}

JavaScript

jQuery(function($){
    
    function ImageFun(category) {
        var baseSRC = 'http://lorempixel.com/100/100/' + category + '/';
        var maxCount = 6;
        var loadTimer = null;
        var currentHovered = null;
        var currentLoaded = null;
        var currentCount = null;
        var firstImage = null;
        var currentImage = null;
        var nextImage = null;
        
        var swapImages = function(){
            console.log("swapImages");
            var go = function(){
                if(currentImage.is(nextImage)){return;}
                currentImage.fadeOut(300,
                    function(){currentImage = nextImage;}
                );
                nextImage.fadeIn(300);
                startTimer();
            };
            nextImage = currentImage.next('.loaded');
            if(!nextImage.length){
                if(currentCount == maxCount){
                    currentCount = 0;
                    nextImage = firstImage;
                    return go();
                }
                var img = $('<img data-n="'+currentLoaded+'">');
                img.on('load',function(){
                    currentLoaded++;
                    console.log("currentLoaded",currentLoaded);
                    $(this).addClass('loaded');
                })
                img.attr('src',baseSRC+(currentLoaded+1));
                img.insertAfter(currentImage);
                currentCount = 0;
                nextImage = firstImage;
                return go();
            }
            currentCount++;
            go();
        }
        
        var startTimer = function(){
            clearTimeout(loadTimer);
            loadTimer = setTimeout(swapImages,1000)
        }
        
        var next = function(thumb){
            currentHovered = thumb;
            currentLoaded = thumb.data('loaded') || 0;
            currentCount = thumb.data('count') || 0;
            firstImage = currentImage = thumb.find('img').first();
           ...