JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://vodkabears.github.io/galereya/js/jquery.galereya.min.js"></script>
<link rel="stylesheet" href="http://vodkabears.github.io/galereya/css/jquery.galereya.css">
<link rel="stylesheet" href="http://cougardesign.ru/templates/cougarnest/css/style_new.css">
<link rel="stylesheet" href="http://cougardesign.ru/templates/cougarnest/css/layout.css">
<script src="http://nephalemcube.ru/libs/jquery.mCustomScrollbar.min.js"></script>
<link rel="stylesheet" href="http://nephalemcube.ru/libs/jquery.mCustomScrollbar.css">
<div class="image_box">
<img src="http://cougardesign.ru/images/clients/1.jpg"
class="lister"
alt=""
title="Форум о торговле с Китаем"
data-fullsrc="http://cougardesign.ru/images/clients/1_full.jpg"
/>
<img src="http://cougardesign.ru/images/clients/2.jpg"
class="lister"
alt=""
title="Центр развития личности"
data-fullsrc="http://cougardesign.ru/images/clients/2_full.jpg"
/>
<img src="http://cougardesign.ru/images/clients/3.jpg"
class="lister"
alt=""
title="Диллерский сайт"
data-fullsrc="http://cougardesign.ru/images/clients/3_full.jpg"
/>
<img src="http://cougardesign.ru/images/clients/4.jpg"
class="lister"
alt=""
title="Магазин сантехники"
data-fullsrc="http://cougardesign.ru/images/clients/4_full.jpg"
/>
</div>
CSS
.image_box img {
cursor: pointer;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.galereya-cell-overlay {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.galereya-cell, .galereya-cell-img { width:200px; }
.galereya-cell { padding:0px; }
.galereya-cell:hover .galereya-cell-desc { bottom:0px; }
.galereya-grid { top:0px; }
/** .galereya-slider-desc { display: none; } **/
.galereya-slider-play { display: none !important; }
.galereya-slider-nav { opacity: 0.7; }
.galereya-cell-desc-title {
font-weight: normal;
font-family: 'Open Sans', sans-serif;
font-size: 1em;
}
.galereya-slider-close {
right:0px;
opacity: 0.60;
left: initial;
}
.galereya-slide-img {
max-height: initial;
margin-top: 0px !important;
margin-bottom: 40px;
max-width: 1264px;
width: 100%;
}
.mCSB_scrollTools {
right: 5% !important;
}
.mCSB_draggerRail, .mCSB_dragger_bar {
width: 10px !important;
}
.galereya-slider-nav.left, .galereya-slider-nav.right {
bottom: 40%;
width: 70px;
height: 150px;
top: initial;
}
.mCSB_container {
margin-right:0px;
}
.mCSB_dragger_bar, .mCSB_draggerRail {
-webkit-border-radius: 0px !important;
-moz-border-radius: 0px !important;
border-radius: 0px !important;
}
.mCSB_draggerContainer {
margin-top:10px;
margin-bottom:10px;
}
.galereya-slider-slide.current {
padding: 0px;
border:0px;
}
@media screen and (min-width: 1250px) and (max-width: 1450px) {
.galereya-slide-img {
max-width: 1000px;
}
.mCSB_scrollTools {
visibility: visible !important;
right:80px !important;
}
}
@media screen and (min-width: 1500px) {
.mCSB_scrollTools { visibility: visible !important; }
.cougarlogo { visibility: visible !important; }
}
@media screen and (min-width: 1700px) {
.mCSB_scrollTools { right: 10% !important; }
}
@media screen and (min-width: 1900px) {
.mCSB_scrollTools { right:...
JavaScript
$('.image_box').galereya({
wave: false,
spacing: 25,
});
$('.galereya-cell').click(function () {
var Inter = setInterval( function() {
var current = $(".galereya-slider-slide.current");
if ($(current).length>0) {
clearInterval(Inter);
$(current).mCustomScrollbar({scrollInertia: 150,});
$('.galereya-slider').append('<img src="http://cougardesign.ru/templates/cougarnest/images/logo.png" class="cougarlogo" border="0" alt="" style="position:absolute;left:10px;top:10px;">');
bottom_resizer();
}
}, 1000);
});
$('.galereya-slider-nav').click(function () {
setTimeout(function() {
var current = $(".galereya-slider-slide.current");
if ($(current.mCustomScrollBox).length == 0) {
$(current).mCustomScrollbar({scrollInertia: 150,});
bottom_resizer();
}
},300);
});
$(window).resize( function() {
bottom_resizer();
});
function bottom_resizer () {
$('.galereya-slider-desc').css('width', $('.galereya-slider-slide.current .galereya-slide-img').css('width'));
$('.galereya-slider-desc').css('margin-left', ($(window).width() - parseInt($('.galereya-slider-slide.current .galereya-slide-img').css('width'))) / 2);
}