JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="http://www.booclin.ovh/tom/14578/index/normal/jquery.fancybox.js"></script>
<script src="http://www.booclin.ovh/tom/14578/index/normal/fancybox.js"></script>
<div class="leftpart">

<div style="display:none;" class="secondleftpart">    
    
<a title="Prev" style="font-size: 8px; vertical-align: bottom; height: auto; 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: auto; width:15px; position: relative" class="fancybox-nav fancybox-prev" href="javascript:$.fancybox.next();">NEXT</a>

<br/> 
    
<a style="font-size: 8px;" title="Thumbnails" id="closegallery" class="showthumbnails" href="javascript:;">
THUMBNAILS
</a>

</div>

   
    
    
<a class="iconfirstleftpart" style="cursor:pointer" onclick="toggleOverlay()">
<img style="height:20px; width:20px;" src="http://www.starkasia.com/wp-content/uploads/icons/menu.png" alt=""></a> 
    
</div>  


    




    
    

    
    
    

<div class="rightpart">
<div id="globalgalerie">

<a class="fancyboxgallery" data-fancybox-group="book1" href="http://www.starkasia.com/wp-content/uploads/Book3/6.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.starkasia.com/wp-content/uploads/Book3/06.jpg" alt=""/>
</a>
    
<a class="fancyboxgallery" data-fancybox-group="book1" href="http://www.starkasia.com/wp-content/uploads/Book3/5.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.starkasia.com/wp-content/uploads/Book3/05.jpg" alt=""/>
</a>
    
<a class="fancyboxgallery" data-fancybox-group="book1" href="http://www.starkasia.com/wp-content/uploads/Book3/4.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.starkasia.com/wp-content/uploads/Book3/04.jpg" alt=""/>
</a>
    
<a...

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%; 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; background-color: none; -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; }











/* --  cookie  -- */
.cookie-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 + .cookie-bar { transform: translateY(-1000px); }

.cookieshr { margin:60px auto; width: 80px; height: 1px; background-color: rgba(140, 140, 140, .2); }

.overlaycookies { 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: 0; right: 0; bottom: 0px; width: 100%; height: 100%; z-index:9999; }

.fa-toggle-off { display:...

JavaScript

$("#launcherbook2").on("click", function(){
$("a.fancyboxgallery").eq(0).trigger("click");
});
    
$(".fancybox-lock").bind("mousewheel", function() { return false; });

$( function( ){ 
$( "#closegallery" ).on( "click", function(){
$.fancybox.close(); return false; });
});
    

$(".fancyboxthumbnailsgallery, .hidemenubook2").click(function(){
$(".secondleftpart").show();
$(".showthumbnails").show();
});
    
$("#closegallery").click(function(){
$(".secondleftpart").hide();
$(".showthumbnails").hide();
});