JSFiddle - React, Tailwind, and code Playground

by oceog

HTML

<div class="c_gallery">
    <div>
        <div>
            <img src="http://placehold.it/350x150/ff0000&text=1" class="imghov" id="22" alt="http://placehold.it/350x150/00ff00&text=1" />
        </div>
    </div>
    <div>
        <div>
            <img src="http://placehold.it/350x150/ff0000&text=2" class="imghov" id="22" alt="http://placehold.it/350x150/00ff00&text=2" />
        </div>
    </div>
    <div>
        <div>
            <img src="http://placehold.it/350x150/ff0000&text=3" class="imghov" id="22" alt="http://placehold.it/350x150/00ff00&text=3" />
        </div>
    </div>
</div>

<div class="c_gallery">
    <div>
        <div>
            <img src="http://placehold.it/350x150/fff000&text=1" class="imghov" id="22" alt="http://placehold.it/350x150/0000ff&text=1" />
        </div>
    </div>
    <div>
        <div>
            <img src="http://placehold.it/350x150/fff000&text=2" class="imghov" id="22" alt="http://placehold.it/420x250/0000ff&text=2" />
        </div>
    </div>
    <div>
        <div>
            <img src="http://placehold.it/350x150/fff000&text=3" class="imghov" id="22" alt="http://placehold.it/350x150/0000ff&text=3" />
        </div>
    </div>
</div>

CSS

#overlay {
    opacity:0.5;
    position:fixed;
    float:left;
    background:#666;
    display:none;
    z-index:17;
    min-height:100%;
    min-width:100%;
}
#img_placer {
    min-height:100%;
    min-width:100%;
    position:fixed;
    display:none;
    z-index:18;
}
#img_holder {
    z-index:20;
    background:url('http://s20.postimg.org/r630mhhft/249_1.gif') center center no-repeat #fff;
    height:60px;
    width:60px;
    overflow:hidden;
    position:relative;
    border-radius:4px;
    box-shadow:0 3px 6px #000;
    border:1px solid silver;
    padding:8px;
    margin:5% auto;
    display:block;
    font-size:11px;
}
#img_holder img {
    display:none;
}
#img_holder span {
    background:white;
    z-index:30;
    cursor:pointer;
}
.btn {
    padding:10px;
    position:absolute;
    margin-top:-20px;
    display:none;
    top:50%;
}
#prev {
    left:0;
}
#next {
    right:0;
}
#close_gal {
    position: absolute;
    top:0;
    right:0;
    padding:8px 10px;
}

JavaScript

(function ($) {

     $('body').prepend('<div id="overlay"></div><div id="img_placer"><div id="img_holder"><span id="next" class="btn">NEXT</span><span id="prev" class="btn">PREV</span><span id="close_gal">X</span></div></div>');

     var defaults = {
         next: $('#next'),
         prev: $('#prev'),
         btn: $('.btn'),
         close_btn: $('#close_gal'),
         overlay: $('#overlay'),
         placer_img: $('#img_placer'),
         holder_empty: $('#img_holder'),
         effect: "500,'easeOutBounce'"
     };

     var methods = { // методы галереи
         thmb_click: function ($gallery) {
             return function () {
                 var elem = $(this),
                     load_image = elem.attr('alt');
                 imgArray = $gallery.data('imgArray');
                 $gallery.data('i', imgArray.indexOf(load_image));
                 methods.img_load($gallery);
             };
         },

         img_load: function ($gallery) { //загрузка картинок в див
             var settings = $gallery.data('settings'),
                 i = $gallery.data('i');
             settings.prev.hide();
             settings.next.hide();
             $('img', settings.holder_empty).remove();
             settings.placer_img.show().siblings('div').show();
             settings.holder_empty.append('<img src="' + imgArray[i] + '">');
             var holder_img = $('img', settings.holder_empty);
             holder_img.bind('load', function () {
                 if (holder_img.length) {
                     settings.holder_empty.animate({
                         width: holder_img.width(),
                         height: holder_img.height()
                     }, function () {
                         $('img', this).fadeIn();
                         methods.btns_check($gallery);
                     });
                 }
             });
         },

         btns_check: function ($gallery) { // отображение кнопок
             var settings =...