JSFiddle - React, Tailwind, and code Playground

by brianlmerritt

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<div id="fancydiv1" style="display:none"><a rel="gallery" class="fancybox" id="fancybox1" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a></div>
<div  id="fancydiv2" style="display:none"><a rel="gallery" class="fancybox" id="fancybox2" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a></div>
<h1>Header 1</h1>
<p>Bacon ipsum dolor amet ipsum officia cillum pork chop beef ribs cow ex voluptate cupidatat. Duis do labore shankle pork belly adipisicing. Enim jowl strip steak sirloin shank ground round. Picanha fatback frankfurter kielbasa. Landjaeger in commodo brisket cupidatat pariatur. Biltong tri-tip aliquip elit et do.</p><p>Esse magna alcatra ut, exercitation meatloaf beef ribs laboris reprehenderit brisket nulla filet mignon. In mollit fugiat dolore boudin andouille ham. In beef ribs cow, landjaeger t-bone pork loin chicken swine non sunt pancetta ea biltong hamburger. Hamburger aute eiusmod veniam laborum occaecat kevin aliquip ea voluptate labore elit drumstick cow. Non cow in meatloaf, short ribs porchetta tri-tip landjaeger voluptate in dolor venison short loin lorem. Sirloin bacon proident, ea laborum labore in salami. Short ribs ipsum est boudin filet mignon cupim pastrami turkey jowl rump andouille ea in.</p><p>Leberkas shoulder chicken ut, ea laboris sirloin turkey ipsum mollit enim lorem jowl. Officia fatback beef ribs shankle qui dolore venison esse jerky exercitation. Andouille pork loin pig shank, dolor ipsum ham hock exercitation mollit tri-tip voluptate eiusmod deserunt. Cupidatat eu consectetur, sunt flank id do biltong ex ball tip tenderloin eiusmod.</p><p>Swine cupim ball tip, deserunt hamburger occaecat commodo pariatur shankle bresaola et boudin...

JavaScript

var timerCount = 0;
$(".fancybox").fancybox({
    helpers : {
        overlay : {
            css : {
                'background' : 'rgba(58, 42, 45, 0.35)'
            }
        }
    }
});

setInterval(function() {
    console.log(timerCount);
 switch (timerCount) {
        case 2:
            /*$('#fancydiv2').show();
            $('#fancydiv1').hide();*/
            $('#fancybox2').click() ;
            timerCount = 0;
            break;
        case 1:
            /*$('#fancydiv1').show();
            $('#fancydiv2').hide();*/
            $('#fancybox1').click() ;
            timerCount++;
            break ;
        case 0:
            /*$('#fancydiv1').hide();
            $('#fancydiv2').hide();*/
            $('.fancybox-close').click();
            timerCount++;
            
   }   
}, 2000);