JSFiddle - React, Tailwind, and code Playground

by hobobne

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 class="smallThumbs" >
    <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 class=SmallThumbnail2 ><a href="image.jpg" rel="zoom-id:prod_gallery" rev="image.jpg" title="Rochia Amethyst"><img src="image.jpg" alt="Rochia Amethyst" /></a></li>
                <li class=SmallThumbnail2 ><a href="image.jpg" rel="zoom-id:prod_gallery" rev="image.jpg" title="Rochia Amethyst"><img src="image.jpg" alt="Rochia Amethyst" /></a></li>
                <li class=SmallThumbnail2 ><a href="image.jpg" rel="zoom-id:prod_gallery" rev="image.jpg" title="Rochia Amethyst"><img src="image.jpg" alt="Rochia Amethyst" /></a></li>
                <li class=SmallThumbnail2 ><a href="image.jpg" rel="zoom-id:prod_gallery" rev="image.jpg" title="Rochia Amethyst"><img src="image.jpg" alt="Rochia Amethyst" /></a></li>
                <li class=SmallThumbnail2 ><a href="image.jpg" rel="zoom-id:prod_gallery" rev="image.jpg" title="Rochia Amethyst"><img src="image.jpg" alt="Rochia Amethyst" /></a></li>
            </ul>
        </div>
    </div>
</div>

JavaScript

$(function() {
    $('#tj_container').gridnav({
        rows    : 1,
        navL    : '#tj_prev',
        navR    : '#tj_next',
        type    : {
            mode        : 'seqfade',    // 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      : 100,          // for seqfade, sequpdown, rows
            reverse     : ''            // for sequpdown
        }
    });
});