JSFiddle - React, Tailwind, and code Playground

by Aleksey Karagodnikov

HTML

<div class="gallery-preview-wrapper">
    <div class="preview-main-image-wrapper">
        <div class="zoom-zoom"></div>
        <div class="preview-main" data-original="http://placehold.it/400x400/E8117F/000000&amp;text=1">
            <img src="http://placehold.it/230x150/E8117F/000000&amp;text=1" alt="" />
        </div>
    </div>
    <div class="preview-mini-images-wrapper">
        <div class="preview-mini">
            <img src="http://placehold.it/73x52/E8117F/000000&amp;text=1" data-preview="http://placehold.it/230x150/E8117F/000000&amp;text=1" data-original="http://placehold.it/400x400/E8117F/000000&amp;text=1" alt="" />
        </div>
        <div class="preview-mini">
            <img src="http://placehold.it/73x52/E8117F/000000&amp;text=2" data-preview="http://placehold.it/230x150/E8117F/000000&amp;text=2" data-original="http://placehold.it/400x400/E8117F/000000&amp;text=2" alt="" />
        </div>
        <div class="preview-mini">
            <img src="http://placehold.it/73x52/E8117F/000000&amp;text=3" data-preview="http://placehold.it/230x150/E8117F/000000&amp;text=3" data-original="http://placehold.it/400x400/E8117F/000000&amp;text=3" alt="" />
        </div>
        <div class="preview-mini">
            <img src="http://placehold.it/73x52/E8117F/000000&amp;text=4" data-preview="http://placehold.it/230x150/E8117F/000000&amp;text=4" data-original="http://placehold.it/400x400/E8117F/000000&amp;text=4" alt="" />
        </div>
        <div class="preview-mini">
            <img src="http://placehold.it/73x52/E8117F/000000&amp;text=5" data-preview="http://placehold.it/230x150/E8117F/000000&amp;text=5" data-original="http://placehold.it/400x400/E8117F/000000&amp;text=5" alt="" />
        </div>
        <div class="preview-mini">
            <img src="http://placehold.it/73x52/E8117F/000000&amp;text=6" data-preview="http://placehold.it/230x150/E8117F/000000&amp;text=6" data-original="http://placehold.it/400x400/E8117F/000000&amp;text=6" alt="" />
   ...

CSS

.gallery-preview-wrapper {
    float: left;
    width: 240px;
}
.preview-main-image-wrapper {
    height: 160px;
    position: relative;
    width: 240px;
}
.zoom-zoom {
    background: url(http://imgur.com/VJH1RZv.png);
    content:"";
    cursor: pointer;
    display: block;
    height: 24px;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 24px;
}
.preview-main {
    display: block;
    cursor: pointer;
}
.preview-main > img {
    border: 5px solid #ffffff;
    max-height: 150px;
    max-width: 230px;
}
.preview-mini-images-wrapper {
    display: table;
    margin-top: 25px;
    width: 240px;
}
.preview-mini > img {
    border: 1px solid #9e9e9f;
    max-height: 52px;
    max-width: 73px;
}
.preview-mini {
    cursor: pointer;
    display: inline-block;
    margin-left: 5px;
    *margin-left: 3px;
    /* IE 6-7 */
    margin-left: 3px\9;
    /* IE 8-9 */
    margin-top: 3px;
    margin-bottom: 0;
}
@-moz-document url-prefix() {
    .preview-mini {
        margin-left: 3px;
    }
}
.preview-mini:nth-of-type(1), .preview-mini:nth-of-type(3n+1) {
    margin-left: 0;
}
.preview-mini:nth-of-type(1), .preview-mini:nth-of-type(2), .preview-mini:nth-of-type(3) {
    margin-top: 0;
}
.gallery-view-wrapper {
    background: rgba(0, 0, 0, 0.5);
    display: none;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.gallery-view {
    background-color: #ffffff;
    border: 6px solid #333333;
    border-radius: 6px;
    height: 462px;
    left: 50%;
    margin-top: -231px;
    margin-left: -198px;
    padding: 3px 20px 20px;
    position: fixed;
    top: 50%;
    width: 395px;
}
.gallery-view {
    background-color: #333333;
    border-color: #ffffff;
    height: 400px;
    margin-left: -200px;
    margin-top: -200px;
    padding: 0;
    width: 400px;
}
.close-gallery {
    background: url(http://imgur.com/wOy3PQr.png) center no-repeat;
    cursor: pointer;
    display: block;
    height: 20px;
    position: absolute;
   ...

JavaScript

var close_gallery_button = document.querySelectorAll('.close-gallery'),
    preview_main = document.querySelector('.preview-main'),
    preview_main_img = document.querySelector('.preview-main > img'),
    preview_mini_img = document.querySelectorAll('.preview-mini > img'),
    previews_total = preview_mini_img.length,
    zoom = document.querySelectorAll('.zoom-zoom, .preview-main'),
    gallery_view = document.querySelector('.gallery-view-wrapper'),
    gallery_view_img = document.querySelector('.gallery-view > img'),
    left_arrow = document.querySelector('.gallery-view .left-arrow'),
    rigth_arrow = document.querySelector('.gallery-view .rigth-arrow');

function bindEvent(element, type, handler) {
    if (element.addEventListener) {
        element.addEventListener(type, handler, false);
    } else {
        element.attachEvent('on' + type, handler);
    }
}

function bindEventAll(NodeList, type, handler) {
    for (var i = 0; i < NodeList.length; ++i) {
        var element = NodeList[i];
        bindEvent(element, type, handler);
    }
}

function slide_swapper(swap_to_the_right) {
    swap_to_the_right = false || swap_to_the_right;

    for (var i = 0, slide_pos = 0; i < previews_total; ++i) {
        var item = preview_mini_img[i];
        if (item.getAttribute('data-original') === gallery_view_img.src) {
            slide_pos = i;
            break;
        }
    }

    var start_pos = 0,
        end_pos = previews_total - 1,
        is_beyond_limit = swap_to_the_right ? (--slide_pos < 0) : (++slide_pos > end_pos),
        edge_pos = swap_to_the_right ? end_pos : start_pos,
        new_pos = is_beyond_limit ? edge_pos : slide_pos,
        next_slide = preview_mini_img[new_pos],
        next_slide_preview = next_slide.getAttribute('data-preview'),
        next_slide_original = next_slide.getAttribute('data-original');


    gallery_view_img.src = next_slide_original;
    preview_main.setAttribute('data-original', next_slide_original);
   ...