JSFiddle - React, Tailwind, and code Playground

by HappyCougar

HTML

<script src="http://cougardesign.ru/templates/cougarnest/javascript/jquery.smooth-scroll.js"></script>
<script src="http://cougardesign.ru/templates/cougarnest/javascript/jquery.loupe.js"></script>
<div class="colorbox hidden" 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>
<div class="colorbox_preview">
<img src="http://cougardesign.ru/images/clients/1.jpg" class="lister" id="lister" alt="" />
<img src="http://cougardesign.ru/images/clients/2.jpg" class="lister" id="lister" alt="" />
<img src="http://cougardesign.ru/images/clients/3.jpg" class="lister" id="lister" alt="" />
<img src="http://cougardesign.ru/images/clients/1.jpg" class="lister" id="lister" alt="" />
</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:50px;
}
.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 rgba(50, 50, 50,...

JavaScript

$('.lister').click(function() {
    
    $('.active').removeClass('active');
    $(this).addClass('active');

    
     var img_path = $(this).attr('src');
     var html_path = img_path.replace(".jpg",".html");
     img_path = img_path.replace(".jpg","_full.jpg");
    
    var pic = new Image();    
    pic.src = img_path ;
    
    
    
$(pic).load(function() {    
    if ( !$("#colorbox").hasClass("open") ) {
        $('.colorbox').addClass('open'); 
        $(".colorbox_img").html('<img src="' + img_path + '" style="width:100%;height:100%" class="ajax_img" id="ajax_img" alt="" />');
        $('.colorbox').show('blind', 1000 );
        $('.ajax_img').loupe();    
    }
    else {
        $('#loupe').css('visibility','hidden');
        scroll_to_elem( 'colorbox' , 800 );
        $('.ajax_img').hide('fade',900 , function(){$('.ajax_img').attr('src', img_path).show('fade', 900);});
        $('.loupe img').attr('src', img_path);
    } 
    // ajax_comments( html_path ); раскоментить после поставки на cougar
    });
});
function scroll_to_elem(elem,speed) {
	if(document.getElementById(elem)) {
		var destination = jQuery('#'+elem).offset().top;
		jQuery("html,body").animate({scrollTop: destination}, speed);
	}
}
function ajax_comments (url) {
    $.ajax({
        url: url,             
        dataType : "html",                     
        success: function(html) { $(".colorbox_comment").append(html); } 
    });
}

// джава

$('.lister').click(function() {
    setTimeout(function(){$('#loupe').css('visibility','visible');},600);    
});