JSFiddle - React, Tailwind, and code Playground

by HappyCougar

HTML

<link rel="stylesheet" href="http://manos.malihu.gr/tuts/custom-scrollbar-plugin/demo_files/jquery.mCustomScrollbar.css">
<script src="http://manos.malihu.gr/tuts/custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
<div class="colorbox" id="colorbox">
    <div class="colorbox_top_border"></div>
    <div class="colorbox_bottom_border"></div>
    <div class="colorbox_content">
        <div class="colorbox_img"></div>
        <div class="colorbox_comment"></div>
    </div>
    <div class="colorbox_itemlist">
    <img src="http://cougardesign.ru/images/clients/1.jpg" class="lister" alt="" />
<img src="http://cougardesign.ru/images/clients/2.jpg" class="lister" alt="" />
<img src="http://cougardesign.ru/images/clients/3.jpg" class="lister" alt="" />
<img src="http://cougardesign.ru/images/clients/1.jpg" class="lister" alt="" />
<img src="http://cougardesign.ru/images/clients/1.jpg" class="lister" alt="" />
<img src="http://cougardesign.ru/images/clients/2.jpg" class="lister" alt="" />
<img src="http://cougardesign.ru/images/clients/3.jpg" class="lister" alt="" />
<img src="http://cougardesign.ru/images/clients/1.jpg" class="lister" alt="" />
    </div>
</div>
<div class="colorbox_preview">

</div>

CSS

.colorbox {
    width:100%;    
    background: url(http://cougardesign.ru/templates/cougarnest/images/colorbar.png);
    position:relative;
    top:20px;
    margin-bottom:20px;
    max-width:900px;
}
.colorbox_content {
   padding: 30px 0px 30px 30px;
}
.colorbox_top_border {
    position:absolute;
    top:0px;
    width:100%;
    height:7px;
    background: #e5e5e5;
    background: -moz-linear-gradient(top, #e5e5e5 1%, #f7faff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#e5e5e5), color-stop(100%,#f7faff));
    background: -webkit-linear-gradient(top, #e5e5e5 1%,#f7faff 100%);
    background: -o-linear-gradient(top, #e5e5e5 1%,#f7faff 100%);
    background: -ms-linear-gradient(top, #e5e5e5 1%,#f7faff 100%);
    background: linear-gradient(to bottom, #e5e5e5 1%,#f7faff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#f7faff',GradientType=0 );
    border-bottom:1px solid gray;
    -webkit-box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.5);
    -moz-box-shadow:    0px 5px 5px rgba(50, 50, 50, 0.5);
    box-shadow:         0px 5px 5px rgba(50, 50, 50, 0.5);
}
.colorbox_bottom_border {
    position:absolute;
    bottom:0px;
    width:100%;
    height:7px;
    background: #f7faff;
    background: -moz-linear-gradient(top, #f7faff 0%, #e5e5e5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7faff), color-stop(100%,#e5e5e5));
    background: -webkit-linear-gradient(top, #f7faff 0%,#e5e5e5 100%);
    background: -o-linear-gradient(top, #f7faff 0%,#e5e5e5 100%);
    background: -ms-linear-gradient(top, #f7faff 0%,#e5e5e5 100%);
    background: linear-gradient(to bottom, #f7faff 0%,#e5e5e5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7faff', endColorstr='#e5e5e5',GradientType=0 );
    border-top:1px solid gray;
    -webkit-box-shadow: 0px -5px 5px rgba(50, 50, 50, 0.5);
    -moz-box-shadow:    0px -5px 5px...

JavaScript

$('.lister').click(function() {
    $('.active').removeClass('active');
    $(this).addClass('active');
    var img_path = $(this).attr('src');
    var html_path = img_path.replace(".jpg",".html");
    var pic = new Image(); 
    img_path = img_path.replace(".jpg","_full.jpg");
    pic.src = img_path ;
        
$(pic).load(function() {    
    if ( !$("#colorbox").hasClass("open") ) {
        $('.colorbox').addClass('open').show('blind', 1000 );; 
        $(".colorbox_img").html('<img src="' + img_path + '" id="ajax_img" class="ajax_img"  alt="" />');
    }
    else {
        $('.ajax_img').hide('fade',900 , function(){$('.ajax_img').attr('src', img_path).show('fade', 900);});
    } 
    // ajax_comments( html_path ); раскоментить после поставки на cougar
    });
});


function ajax_comments (url) {
    $.ajax({
        url: url,             
        dataType : "html",                     
        success: function(html) { $(".colorbox_comment").append(html); } 
    });
}

$(".colorbox_itemlist").mCustomScrollbar({
  scrollInertia:150,
  autoDraggerLength:false
});