JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<script src="http://tympanus.net/Development/GridNavigationEffects/js/jquery.easing.1.3.js"></script>
<script src="http://tympanus.net/Development/GridNavigationEffects/js/jquery.mousewheel.js"></script>
<script src="http://tympanus.net/Development/GridNavigationEffects/js/jquery.gridnav.js"></script>
<div id="tj_container" class="tj_container">
    <div class="tj_nav"> <span id="tj_prev" class="tj_prev">Previous</span>
	<span id="tj_next" class="tj_next">Next</span>

    </div>
    <div class="tj_wrapper">
        <ul class="tj_gallery">
            <li><a href="#"><img src="http://tympanus.net/Development/GridNavigationEffects/images/1.jpg" alt="image01" /></a>

            </li>
            <li><a href="#"><img src="http://tympanus.net/Development/GridNavigationEffects/images/2.jpg" alt="image02" /></a>

            </li>
            <li><a href="#"><img src="http://tympanus.net/Development/GridNavigationEffects/images/3.jpg" alt="image03" /></a>

            </li>
            <li><a href="#"><img src="http://tympanus.net/Development/GridNavigationEffects/images/4.jpg" alt="image04" /></a>

            </li>
            <li><a href="#"><img src="http://tympanus.net/Development/GridNavigationEffects/images/5.jpg" alt="image05" /></a>

            </li>
            <li><a href="#"><img src="http://tympanus.net/Development/GridNavigationEffects/images/6.jpg" alt="image06" /></a>

            </li>
            <li><a href="#"><img src="http://tympanus.net/Development/GridNavigationEffects/images/7.jpg" alt="image07" /></a>

            </li>
            <li><a href="#"><img src="http://tympanus.net/Development/GridNavigationEffects/images/8.jpg" alt="image08" /></a>

            </li>
            <li><a href="#"><img src="http://tympanus.net/Development/GridNavigationEffects/images/9.jpg" alt="image09" /></a>

            </li>
            <li><a href="#"><img src="http://tympanus.net/Development/GridNavigationEffects/images/10.jpg" alt="image10" /></a>

         ...

CSS

/* Thumbnail Effects Style */
 .tj_container {
    width:800px;
    height:400px;
    position:relative;
    margin:30px auto;
}
.tj_nav {
    position:absolute;
    right:-80px;
    top:50%;
    margin-top:-35px;
    height:70px;
    width:39px;
}
.tj_nav span {
    width:39px;
    height:25px;
    background:transparent url(http://tympanus.net/Development/GridNavigationEffects/images/prev.png) no-repeat top left;
    position:absolute;
    top:0px;
    left:0px;
    text-indent:-9000px;
    opacity:0.7;
    cursor:pointer;
    /*-webkit-transition: all 0.2s ease-in-out;
	-moz-transition:all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-transition: all 0.2s ease-in-out;*/
}
.tj_nav span.tj_next {
    background-image:url(http://tympanus.net/Development/GridNavigationEffects/images/next.png);
    top:auto;
    bottom:0px;
    left:0px;
}
.tj_nav span:hover {
    opacity:1.0;
}
.tj_wrapper {
    width:100%;
    height:100%;
    position:relative;
    margin:0px auto;
}
.tj_wrapper ul li {
    float:left;
    list-style:none;
}
.tj_wrapper ul li a {
    outline:none;
    display:block;
    margin:5px;
    background:transparent url(http://tympanus.net/Development/GridNavigationEffects/images/bg_thumb.jpg) no-repeat center center;
}
.tj_wrapper ul li a img {
    display:block;
    border:none;
    opacity:0.7;
    -moz-box-shadow:2px 2px 4px #8e8e8e;
    -webkit-box-shadow:2px 2px 4px #8e8e8e;
    box-shadow:2px 2px 4px #8e8e8e;
    /*-webkit-transition: all 0.2s ease-in-out;
	-moz-transition:all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-transition: all 0.2s ease-in-out;*/
}
.tj_wrapper ul li a img:hover {
    opacity:1.0;
}
/* Specific style for the examples */
 .example10 .tj_container {
    height:600px;
}

JavaScript

$(function () {
     $('#tj_container').gridnav({
         type: {
             mode: 'disperse', // use def | fade | seqfade | updown | sequpdown | showhide | disperse | rows
             speed: 500, // for fade, seqfade, updown, sequpdown, showhide, disperse, rows
             easing: '', // for fade, seqfade, updown, sequpdown, showhide, disperse, rows	
             factor: '', // for seqfade, sequpdown, rows
             reverse: '' // for sequpdown
         }
     });
 });