JSFiddle - React, Tailwind, and code Playground

by Caleb Wong

HTML

<div class="article-media article-media-main">
    <div class="image">
        <div class="image-frame">
            <img src="http://placekitten.com/150/150" alt="">
        </div>
        <p class="caption">caption 1</p>
    </div>
</div>

<div class="article-media article-media-thumbs">
    <div class="content-item cipos-1 cirpos-3 current">
        <a href="http://placekitten.com/150/150"> <img src="http://placekitten.com/50/50" alt="" class="thumbnail"> </a>
        <p class="thumbnail-caption">caption 1</p>
    </div>

    <div class="content-item cipos-2 cirpos-2">
        <a href="http://placekitten.com/160/160"> <img src="http://placekitten.com/50/50" alt="" class="thumbnail"> </a>
        <p class="thumbnail-caption">caption 2</p>
    </div>
    
    <div class="content-item cipos-3 cirpos-1">
        <a href="http://placekitten.com/170/170"> <img src="http://placekitten.com/50/50" alt="" class="thumbnail"> </a>
        <p class="thumbnail-caption">caption 3</p>
    </div>
</div>

CSS

body { font-size: 11px; font-family: arial; }
.article-media-main { border: 1px solid #000; margin: 5px; padding: 5px; }
.article-media-main .caption { background: #999; padding: 5px; }
.article-media-thumbs { border: 1px solid #999; overflow: hidden; padding: 5px; margin: 5px; }
.article-media-thumbs .content-item { width: 50px; display: inline-block; margin: 0 5px; }
.article-media-thumbs .current { border: 1px solid #c00; }

JavaScript

getAndDropLink = function(n) {
    if (n) {
        var href = n.getAttribute('href');
        n.removeAttribute('href');
        return href;
    }
};

var caption, s, main, i, j, a, items, bindNoImage, bindImage;

bindNoImage = function(n, s) {
    return function() {
        n.innerHTML = s;
    };
};

bindImage = function(n, src, caption) {
    return function() {
        var s, img, p, c;
        img = n.querySelector('.image-frame img');
        p = n.querySelector('p.caption');

        if (img) {
            img.src = src;
            if (caption && p) {
                p.innerHTML = caption;
            }
        } else {
            s = '<div class="image-frame"><img src="' + a + '"</div>';
            s += '<p class="caption">' + caption + '</div>';
            n.innerHTML = s;
        }
    };
};

items = document.querySelectorAll('.article-media-thumbs .content-item');
main = document.querySelector('.article-media-main');

        var r, p, pc, z, n, nc;
        r = document.querySelector(".article-media-thumbs");
        p = document.createElement('button');
        pc = document.createTextNode("Prev");
        p.appendChild(pc);
        p.setAttribute("id", "prev");
        z = r.firstChild;
        z.parentNode.insertBefore(p, z);
        n = document.createElement('button');
        nc = document.createTextNode("Next");
        n.appendChild(nc);
        n.setAttribute("id","next");
        r.appendChild(n);

if (!main) {
    return;
}

for (i = 0; i < items.length; i++) {
    caption = items[i].querySelector('.thumbnail-caption');
    if (caption) {
        a = getAndDropLink(items[i].querySelector('a'));
        if (a) {
            items[i].onclick = bindImage(main, a, caption.innerHTML);
        }
    } else { /* backup the markup */
        s = items[i].innerHTML;

        /* drop all the links inside the item */
        a = items[i].querySelectorAll('a');
        for (j = 0; i < a.length; j++) {
            a[j].removeAttribute('href');
   ...