JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<script src="https://cdn.rawgit.com/xremix/xGallerify/master/dist/jquery.xgallerify.min.js"></script>
<script src="http://www.booclin.ovh/tom/1/index/book/fancybox.js"></script>
<script src="http://www.booclin.ovh/tom/1/index/book/jquery.fancybox.js"></script>
<script src="http://www.booclin.ovh/tom/1/index/js/modernizr.custom.js"></script>
<div id="allgalleries"> 
    
    
    
    
<div class="leftpart">
<div class="firstleftpart"> 
<div class="hidemenu">   
    
<a class="hidemenubook1" id="launcherbook1b" data-fancybox-group="book1" href="javascript:void(0);">
<span class="namebook1origin">1</span></a><br/>
    
<a class="hidemenubook2" id="launcherbook2b" data-fancybox-group="book2" href="javascript:void(0);">
<span class="namebook2origin">2</span></a><br/>
    
<a class="hidemenubook3" id="launcherbook3b" data-fancybox-group="book3" href="javascript:void(0);">
<span class="namebook3origin">3</span></a><br/> 
    
<a class="hidemenubook4" id="launcherbook4b" data-fancybox-group="book4" href="javascript:void(0);" onClick="parent.jQuery.fancybox.close();">
<span class="namebook4origin">4</span></a><br/>


</div>    
</div>        
</div>        
    
    
    
    
    
    
    
    
    
    
    
    
<div style="display:none;" class="secondleftpartbook1">    
    
<a title="Prev" style="font-size: 8px; vertical-align: bottom; height: 15px; width:15px; position: relative" class="fancybox-nav fancybox-next" href="javascript:$.fancybox.prev();">PREV</a>
    
<a style="font-size: 8px;" href="javascript:;"> | </a>   
    
<a title="Next" style="font-size: 8px; vertical-align: bottom; height: 15px; width:15px; position: relative" class="fancybox-nav fancybox-prev" href="javascript:$.fancybox.next();">NEXT</a>
    
    
<br/> 
    
<a style="font-size: 8px; position: relative;" title="Thumbnails" id="closegallerybook1" href="javascript:;">
THUMBNAILS</a>
</div>
    

    
    
    
    
    
    
    
<div style="display:none;" class="secondleftpartbook2">    
 ...

CSS

*, *:after, *:before { padding: 0; margin: 0; -webkit-touch-callout: none;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; outline:0; box-sizing: border-box }

.clearfix:before, .clearfix:after { content: " "; display: table; }

.clearfix:after { clear: both; }

html, body { height: 100%; overflow-x: hidden; overflow-y: auto; padding: 0; margin: 0; background-color: #fff; }

body, p, span, a, .links, .linkscredit { margin: 0 auto; font-size: 11px; line-height: 20px;  text-decoration:none; font-family: "open_sansregular", sans-serif; letter-spacing: 1px; text-align:left; color: #282828; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; z-index:9999; }

.spanbold { font-family: "open_sansbold"; }

.boldlinks, .menustyle2 { font-family: "open_sansbold"; cursor:pointer;}

a:hover { color: #d2c6af; }

img, object, embed { border: 0px; }


/* -------------------------------- 

Menu

-------------------------------- */
.menu-bar { z-index:9996; position: fixed; width: 100%; top: 0; right: 0; left: 0; height: auto; padding: 20px;  line-height:20px; text-align: center; background: #d2c6af; transition: .8s; animation: slideIn .8s; animation-delay: .8s; display: inline-block; }

span.message { max-width:350px; }

.mobile { display: none; }

@keyframes slideIn { 0% { transform: translateY(-1000px); }  100% { transform: translateY(0); } }

.close-cb { border: none; background: none; position: absolute; display: inline-block; right: 20px; top: 10px; cursor: pointer; }

.close-cb:hover { color:#fff; }

.checkbox-cb { display: none;}  

#checkbox-cb:checked + .menu-bar { transform: translateY(-1000px); }

.menuhr { max-width: 80px; margin: 60px auto; text-align: center; height: 1px; background-color: rgba(140, 140, 140, .2); }

.overlaymenu, .overlaysubscribe { background-color: rgba(255, 255, 255, .9); -webkit-transition: all .4s cubic-bezier(.25, .8, .25, 1); transition: all .4s cubic-bezier(.25, .8, .25, 1); position: fixed; top: 0px; left:...

JavaScript

jQuery(document).ready(function ($) {
    
        
$(".fancyboxgallerybook0").fancybox({ margin : [10, 10, 10, 1], autoPlay: true, playSpeed : 6000 });
$(".fancyboxgallerybook1").fancybox({ margin : [10, 10, 10, 1] });
$(".fancyboxgallerybook2").fancybox({ margin : [10, 10, 10, 1] });
$(".fancyboxgallerybook3").fancybox({ margin : [10, 10, 10, 1] });
$(".fancyboxgallerybook4").fancybox({ margin : [10, 10, 10, 1] });

    
});



var gallery = $('.thumbnails').gallerify({ 
margin: 10,
mode:{ maxHeight: screen.height * 0.5,
breakPoints:[
    
    
{ minWidth: 1170, columns: 4, },
{ minWidth: 970,  columns: 3, },
{ minWidth: 750,  columns: 2, },
{ maxWidth: 750,  columns: 1, }
    
    
]},lastRow:'adjust' });