JSFiddle - React, Tailwind, and code Playground

by Aleksey Karagodnikov

HTML

<div id="gallery-content">
<h1 class="gallery-h1">Проект дома 210,6 м.кв.</h1>

<div id="table-block">
    <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/500x500/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/500x500/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/500x500/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/500x500/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/500x500/E8117F/000000&amp;text=4"
            		 alt=""/>
            </div>
            <div class="preview-mini">            
            	<img src="http://placehold.it/73x52/E8117F/000000&amp;text=5"
            		...

CSS

body {
    background-color: #eaf5ff;
    float: left;
    margin: 0 auto;
    position: relative;
    width: 100%;
}
#gallery-content {
    margin: 0 auto;
    width: 685px;
}
#gallery-content * {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 14px;
}
#gallery-content a {
    color: #003366;
}
.gallery-h1 {
    font-size: 24px!important;
    margin: 0 0 15px;
}
#table-block {
    display: table;
    width: 100%;
}
.gallery-preview-wrapper {
    float: left;
    width: 240px;
}
.preview-main-image-wrapper {
    height: 160px;
    position: relative;
    width: 240px;
}
.zoom-zoom {
    background-image: url(data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4hJREFUeNqslV1IU2EYx8+WmzJ0morIUqTQiPxisCAsRIiCUCSoLgpiEtiNKV14lVEXhd60gkBBZIRFHzfhwFmsOWwarpgzk1zg3IWOke7TfbVPtf87zoHDaTvzYi/82NnzvO/7f973PM9zBAcHB1SGUQN6wGVwGkhBGKyDWaAGG2SiUCikcg4iwkIMRkD0gGfsY/j9/td4lAoEAionrJOUgRnQxhiCwWBibW1t1+v1xqVSqaixsbGsoqKiiPF7PJ5tq9Xa3tHRYTvMSQqAkYnU5XJFBwYGLIWFhVpE8gY8AvdEItGD3t7e2a2trRAz1+l0+vv7+4/znYQRecgsQmT+2tpaHZwvQTs4wr5S/Bc0NTWdt1gsm8wanU5nhVnCJ1IJ0pH5fL5YXV3dZzhUQEpvfAJcAx1ssbGxsaPb29su5h11d3c/4RO5y0Q0NDT0E8ZXoJS14R06gB+wN7OFYOtk1k5OTm7AX5NNZJpMisViqdLS0o8wXuJkXFpkZWXFC98Ix0dh3R/it9vtAfhvZxIhSX6KJAAmIZmCf/FoBDLwnOY68ctkMolWq71A27qYxEFyfE0XVk1NMX7k2bIrHYnJZHJB9SkdYQtfnczNzX3C3DP03HHGLpFIpjKdpICUA6jGVYnoqibDhxp4Nz8/f66hoaG4ubm5HMUXx+Y7xKnX6yvx0wjMgDxTiURiPxqNkv0IKe5JpkgU8Xh8r6qq6gUrVStBn1qtfst6JyQp+mjaYBaSUiH+9fX1Xdg+ZDuJDlwRi8VCFGA7elERMjIGPLCPgiS4QcfkhH2UFWM3/f6ohYUFN34c2d5JWTKZjJBoAoFAvLOzs4eTQSc1Gs0zpVL5nZNdpI7sZF0qldpvbW01wK/MWvHIqvvMy9vc3PRPTEy0cKr8GLgIFLStjN2G6KvUgGq+tiJ0OBzLzKJQKBRFTxokCZOhS98ksXAzDqc15epdlNvtLkHHtbEX4hpiwEQnxxy5Ub7UNhqNM7wiBIVCIUF70EcikSTfZiQTbTZb4LBC3I9WusvK5XLl8PCwZXFxcQdNMBIOhxOk/ZvNZrdKpbLW19frSeEtLS3ZDyP0nwhLrAR00d8SNXhPt//H4CooHx8fl6yurv7OJZRV5LDwCRkMhum8iJBNMgmh9vbwFTXDfysvIlwhlgBpmGfzJsIILS8v/2IL0D4BledB+uEg+AK+EcM/AQYAL5XEWftN3aMAAAAASUVORK5CYII=);
   ...

JavaScript

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);
    }
}

var show_order_form = document.querySelectorAll('.order-it'),
    contact_form = document.querySelector('.contact-form-wrapper'),
    close_form_button = document.querySelectorAll('.close-form'),
    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');

/* Показываем форму заказа по клику на кнопку "Заказать" */
bindEventAll(show_order_form, 'click', function(e) {
    e.stopPropagation();
    contact_form.style.display = 'block';
});

/* Меняем картинку в превью по клику на картинку из галереи под ним */
bindEventAll(preview_mini_img, 'click', function(e) {
    var preview = this.getAttribute('data-preview'),
        original = this.getAttribute('data-original');
    if (preview_main_img.src !== preview) {        
        preview_main_img.src = preview;
        preview_main.setAttribute('data-original', original);
    }
});

/* Показываем большую картинку по клику на картинку из превью */
bindEventAll(zoom, 'click', function(e) {
    var original =...