JSFiddle - React, Tailwind, and code Playground

by benhowdle89

CSS

var thumb1 = document.getElementById("1");
var thumb2 = document.getElementById("2");
var thumb3 = document.getElementById("3");

var v1source = "http://code.wapple.net/users/dan/incoming/nflbose/nfl.mp4";
var v2source = "http://code.wapple.net/users/dan/incoming/nflbose/elegance.mp4"
var v3source = "http://code.wapple.net/users/dan/incoming/nflbose/performance.mp4"

thumb1.addEventListener('onclick', swapImage, false);
thumb2.addEventListener('onclick', swapImage, false);
thumb3.addEventListener('onclick', swapImage, false);

function swapImage(id) {
    //Get original source
    var oldSrc = document.getElementById("main").src;
    //Swap thumb to main image
    document.getElementById("main").src = document.getElementById(id).src;

    if (id == "1") {
        document.getElementById("video").href = v1source;
    }
    else if (id == "2") {
        document.getElementById("video").href = v2source;
    }
    else if (id == "3") {
        document.getElementById("video").href = v3source;

    };
    //Put original image into thumb
    //document.getElementById(id).src = oldSrc;
    id.cancelBubble = true;
    if (id.stopPropagation) id.stopPropagation();
    //alert(oldSrc);
}

JavaScript

var baseUrl = 'http://code.wapple.net/users/dan/incoming/nflbose/';
var vids = ['nfl.mp4', 'elegance.mp4', 'performance.mp4'];
var main = document.getElementById("main");
var video = document.getElementById("video");
var thumbs = document.getElementsByClassName('thumb');
var thumbL = thumbs.length;

for(i = 0; i < thumbsL; i++){
    var t = thumbs[thumbsL];
    t.addEventListener('click', function(e){   
        main.src = t.src;
        video.href = baseUrl + vids[i];
        e.stopPropagation();
    });
}