JSFiddle - React, Tailwind, and code Playground

by Barry Margolin

HTML

<center>
    <div id="thumbnails">
        <!--<a class="thumbnails" href="#">-->
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <img class="thumb" src="http://www.noticeeverything.com/pics/nowhere.jpg" />
                </td>
                <td>
                    <img class="thumb" src="http://www.noticeeverything.com/pics/The Band.jpg" />
                </td>
                <td>
                    <img class="thumb" src="http://www.noticeeverything.com/pics/Justin NEW.jpg" />
                </td>
                <td>
                    <img class="thumb" src="http://www.noticeeverything.com/pics/The Stage.jpg" />
                </td>
                <td>
                    <img class="thumb" src="http://www.noticeeverything.com/pics/EditWheel.jpg" />
                </td>
                <td>
                    <img class="thumb" src="http://www.noticeeverything.com/pics/The Crowd.jpg" />
                </td>
            </tr>
        </table>
        <!--</a>-->
    </div>
</center>
<div id="slide-container">
    <div id="slideshow">
        <div id="close-button"><a class="close" href="#">X</a>
        </div>
        <div id="next"><a class="next" href="#"><span class="next">>>></span></a>
        </div>
        <div id="prev"><a class="prev" href="#"><span class="prev"><<<</span></a>
        </div>
        <img class="one large" src="http://www.noticeeverything.com/pics/nowhere.jpg" />
        <img class="two large" src="http://www.noticeeverything.com/pics/The Band.jpg" />
        <img class="three large" src="http://www.noticeeverything.com/pics/Justin NEW.jpg" />
        <img class="four large" src="http://www.noticeeverything.com/pics/The Stage.jpg" />
        <img class="five large" src="http://www.noticeeverything.com/pics/EditWheel.jpg" />
        <img class="six large" src="http://www.noticeeverything.com/pics/The Crowd.jpg" />
    </div>
</div>

CSS

#thumbnails {
    position: relative;
    border: 2px solid black;
    height: 104px;
    width: 700px;
    margin-top: 10%;
    margin-bottom: 10%;
}
#thumbnails img {
    border: 2px solid white;
    height: 100px;
    width: auto;
}
#thumbnails img:hover {
    border: 2px solid orange;
}
#slide-container {
    display: none;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(96, 96, 96, 0.5);
}
#slideshow {
    display: none;
    position: absolute;
    border: 5px solid black;
    border-radius: 5px;
    background-color: #404040;
    height: 600px;
    width: 700px;
    top: 50%;
    left: 50%;
    margin-top: -300px;
    margin-left: -350px;
    text-align: center;
}
#slideshow a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.5);
}
#slideshow a:hover {
    color: white;
}
#slideshow img {
    position: absolute;
    display: none;
}
img.one.large, img.three.large, img.five.large {
    height: 600px;
    width: auto;
}
img.two.large, img.four.large, img.six.large {
    width: 100%;
    height: auto;
}
img.one, img.three, img.five {
    left: 20%;
}
img.two, img.four, img.six {
    top: 13%;
    left: 0;
}
#close-button {
    position: absolute;
    height: 25px;
    width: 25px;
    top: -15px;
    right: -15px;
    line-height: 25px;
    font-family: Times;
    border-radius: 50%;
    background-color: rgba(192, 192, 192, 0.7);
    z-index: 2;
}
#next {
    display: none;
    position: absolute;
    height: 20px;
    width: 60px;
    line-height: 20px;
    top: 50%;
    right: 5px;
    text-align: center;
    background-color: rgba(192, 192, 192, 0.7);
    font-size: 14px;
    font-family: Times;
    border-radius: 5px;
    z-index: 2;
}
span.next, span.prev {
    font-size: 20px;
}
#prev {
    display: none;
    position: absolute;
    height: 20px;
    width: 60px;
    line-height: 20px;
    top: 50%;
    left: 5px;
    text-align: center;
    background-color: rgba(192, 192, 192, 0.7);
...

JavaScript

$(document).ready(function () {
    var $photos = [];
    $photos.push($('img.one'), $('img.two'), $('img.three'), $('img.four'), $('img.five'), $('img.six'));
    $("#thumbnails img.thumb").click(function () {
        var index = $(this).closest('td').index();
        $('div#slide-container').fadeIn('fast');
        setTimeout(function () {
            $('div#slideshow').slideDown('fast');
        }, 200);
        setTimeout(function () {
            $("div#slideshow img").eq(index).fadeIn('fast');
        }, 500);
    });
    $('div#slideshow').mouseenter(function () {
        $('div#next, div#prev').fadeIn(500);
    });
    $('div#slideshow').mouseleave(function () {
        $('div#next, div#prev').fadeOut(500);
    });
    $('div#next').click(function () {
        nextClick();
    });
    $('div#prev').click(function () {
        prevClick();
    });
    $('div#close-button').click(function () {
        $('div#slide-container, div#slideshow').fadeOut(500);
        $('div#thumbnails').fadeTo('fast', 1).css("display", "");
        $('div#slideshow img').css('display', 'none');
    });

    function nextClick() {
        var $curr = $('#slideshow img:visible');
        $next = ($curr.next().length) ? $curr.next() : $('#slideshow img.one');
        $curr.fadeOut(200);
        $next.fadeIn(200);
    };

    function prevClick() {
        var $curr = $('#slideshow img:visible');
        $prev = ($curr.prev().length) ? $curr.prev() : $('#slideshow img.six');
        $curr.fadeOut(200);
        $prev.fadeIn(200);
    };
});