JSFiddle - React, Tailwind, and code Playground

by elcoyote67

HTML

<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<script src="https://raw.github.com/fancyapps/fancyBox/master/source/jquery.fancybox.js"></script>
<body background="https://sites.google.com/a/ontraport.com/3-0-documentation/home/bg.png">
<a class="fancybox" href="https://sites.google.com/a/ontraport.com/3-0-documentation/sequences/text1.png" ><img src="https://sites.google.com/a/ontraport.com/3-0-documentation/sequences/text1.png" width="215" height="129" style="border: 2px solid #575757;" alt=""/></a>

<a class="fancybox" href="https://sites.google.com/a/ontraport.com/3-0-documentation/sequences/text2.png"><img src="https://sites.google.com/a/ontraport.com/3-0-documentation/sequences/text2.png" width="215" height="129" style="border: 2px solid #575757;" alt=""/></a>
    
    
<a class="fancybox" href="https://sites.google.com/a/ontraport.com/3-0-documentation/sequences/text3.png"><img src="https://sites.google.com/a/ontraport.com/3-0-documentation/sequences/text3.png" width="215" height="129" style="border: 2px solid #575757;" alt=""/></a>
    
    
    
<a class="fancybox" href="https://sites.google.com/a/ontraport.com/3-0-documentation/sequences/text4.png"><img src="https://sites.google.com/a/ontraport.com/3-0-documentation/sequences/text4.png" width="215" height="129" style="border: 2px solid #575757;" alt=""/></a>
    
    
<a class="fancybox" href="https://sites.google.com/a/ontraport.com/3-0-documentation/sequences/text5.png"><img src="https://sites.google.com/a/ontraport.com/3-0-documentation/sequences/text5.png" width="215" height="129" style="border: 2px solid #575757;" alt=""/></a>
    
    
<a class="fancybox" href="https://sites.google.com/a/ontraport.com/3-0-documentation/sequences/text6.png"><img src="https://sites.google.com/a/ontraport.com/3-0-documentation/sequences/text6.png" width="215" height="129" style="border: 2px solid #575757;" alt=""/></a>
    
    
        <a class="fancybox"...

CSS

.fancybox-close {
    top: 0;
    right: 0;
}

JavaScript

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        padding    : 5,
        margin     : 5,
        nextEffect : 'none',
        prevEffect : 'none',
        afterLoad  : function () {
            $.extend(this, {
                aspectRatio : false,
                type    : 'html',
                width   : '1159px',
                height  : '697px',
                content : '<div class="fancybox-image" style="background-image:url(' + this.href + '); background-size: cover;background-repeat:no-repeat;height:697px;width:1159px;" /></div>'
            });
        }
    });