JSFiddle - React, Tailwind, and code Playground

by jcubed111

HTML

<div id='viewer'>
    <div id='imageArea'>
        <div id='imageNew'></div>
        <div id='captionNew'></div>
        <div id='image'></div>
        <div id='caption'></div>
        <div id='leftarrow' onclick='selectImage(currentImage-1)'>&#9664;</div>
        <div id='rightarrow' onclick='selectImage(currentImage+1)'>&#9654;</div>
    </div>
    <div id='bulls'></div>
    <a href='http://example.com' target='_blank' class='author'>H</a>
</div>

CSS

body{
    background:url(http://i.imgur.com/5yDPq.png) #222;
    /*background:url(http://i.imgur.com/Dt4uX.png) #eee;*/
    font-family:sans-serif;
}

#viewer{
    background:#222;
    border:1px solid #000;
    display:inline-block;
    padding:5px;
    position:relative;
    margin:50px;
}

#imageArea{
    width:500px;
    height:300px;
    border:1px solid #000;
    background:#000;
    position:relative;
    overflow:hidden;
}

#image, #imageNew{
    width:500px;
    height:300px;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-size:cover;
    opacity:1;
    -webkit-transition:opacity .5s ease-in-out;
    -moz-transition:opacity .5s ease-in-out;
    -o-transition:opacity .5s ease-in-out;
    transition:opacity .5s ease-in-out;
}

#caption, #captionNew{
    display:block;
    position:absolute;
    left:0;
    bottom:0;
    width:500px;
    background:rgba(0,0,0,.75);
    border-top:1px solid #000;
    color:#fff;
    padding:5px;
    font-size:12px;
    text-align:left;
    opacity:1;
    -webkit-transition:opacity .5s ease-in-out;
    -moz-transition:opacity .5s ease-in-out;
    -o-transition:opacity .5s ease-in-out;
    transition:opacity .5s ease-in-out;
}

#leftarrow, #rightarrow{
    position:absolute;
    top:50%;
    margin-top:-15px;
    padding:3px;
    height:24px;
    background:rgba(0,0,0,.75);
    border:1px solid #000;
    color:#bbb;
    opacity:0;
    cursor:pointer;
    
    -webkit-transition-property: color, text-shadow, opacity;
    -webkit-transition-duration: .25s, .25s, .5s;
    -webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out;
    -webkit-transition-delay:0, 0, 0;
}

#imageArea:hover #leftarrow, #imageArea:hover #rightarrow{
    opacity:1;
}

#leftarrow:hover, #rightarrow:hover{
    color:#fff;
    text-shadow:0 0 5px #fff;
}

#leftarrow{
    left:0;
    padding-right:7px;
    border-left:none;
    border-top-right-radius:5px;
   ...

JavaScript

/*Image Viewer*/

currentImage = 0;
width = 720;
height = 405;

images = [
    "http://upload.wikimedia.org/wikipedia/commons/f/f6/Swiss_National_Park_131.JPG",
    "http://upload.wikimedia.org/wikipedia/commons/0/07/Stara_planina_suma.jpg",
    "http://upload.wikimedia.org/wikipedia/commons/9/90/River_in_the_Amazon_rainforest.jpg",
    "http://upload.wikimedia.org/wikipedia/commons/c/cb/Hellyer_Gorge%2C_Tasmania.jpg",
    "http://upload.wikimedia.org/wikipedia/commons/b/bc/Biogradska_suma.jpg"
    ];

captions = [
    "Image one.",
    "Image two.",
    "This is image number three. It is of a forest. Forests are places where trees grow.",
    'A forest, also referred to as a wood or the woods and less often as a "wold" (or "weald"), "holt", or "frith" (or "firth"), is an area with a high density of trees.',
    "Ooh... pretty."
    ];

waitTimes = [5000, 5000, 6000, 7000, 5000];
pauseTime = 15000;


imagePreloads = [];
hidden = true;

function preloadImages() {
    for (i = 0; i < images.length; i++) {
        imagePreloads[i] = new Image();
        imagePreloads[i].src = images[i];
    }
}

function makeBulls() {
    code = '';
    //document.getElementById('bulls').innerHTML += "<span onclick='selectImage(" + 0 + ")' id='bull_" + 0 + "'>&#9664;</span>\n";
    for (i = 0; i < images.length; i++) {
        code += "<span ";
        code += "onclick='selectImage(" + i + ")' ";
        if (i == currentImage) {
            code += "class='active' ";
        }
        code += "id='bull_" + i + "'>";
        code += "&bull;</span>\n";
    }
    //document.getElementById('bulls').innerHTML += "<span onclick='selectImage(" + 0 + ")' id='bull_" + 0 + "'>&#9654;</span>\n";
    document.getElementById('bulls').innerHTML = code;
}

function selectImage(i) {
    if (i != currentImage) {
        goToImage(i);
    }
    clearTimeout(autoSwitchTimeout);
    autoSwitchTimeout = setTimeout(autoSwitch, pauseTime);
}

function goToImage(i) {
    document.getElementById("bull_" +...