JSFiddle - React, Tailwind, and code Playground

by nickadeemus2002

HTML

<div id="photoViewer">      
        <div id="photoViewerDialog" class="photoViewerWindow"> 
            <div id="photoViewerImageCon"> 
                <img src="http://placehold.it/500x300" class="image" alt="photo" /> 
                <div id="navigationBar"> 
                    <div id="navigationLeft"><span><</span></div> 
                    <div id="navigationRight"><span>></span></div> 
                </div> 
            </div> 
        </div> 
 
        <div id="photoViewerMask"></div>     
    </div>

CSS

#photoViewerMask { 
    position:absolute; 
    z-index:9000; 
    background-color:#000000; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    } 
 
   #photoViewer .photoViewerWindow { 
    position:fixed; 
    min-width:520px; 
    min-height:520px; 
    max-height: 2048px;     
    z-index:9001; 
    } 
 
   #photoViewer .photoViewerWindow #photoViewerImageCon { 
    display: block; 
    float: left; 
    height: 100%; 
    max-height: 2048px; 
    position: relative; 
    z-index: 9003; 
    text-align: center; 
    background-color: Black; 
    } 
 
   #photoViewer .photoViewerWindow #photoViewerImageCon .image { 
    vertical-align: middle; 
    z-index: 9003; 
    } 
 
   #photoViewer .photoViewerWindow #photoViewerImageCon #navigationBar { 
    position: absolute; 
    top: 0;     
    left: 0; 
    width: 100%; 
    height: 100%; 
    } 
 
   #photoViewer .photoViewerWindow #photoViewerImageCon #navigationLeft, 
   #photoViewer .photoViewerWindow #photoViewerImageCon #navigationRight { 
    color: rgb(255, 255, 255); 
    color: rgba(255, 255, 255, 0.5); 
    font-weight: bold; 
    font-size: 4em; 
    position: absolute; 
    z-index: 9910; 
    top: 0; 
    height: 100%; 
    cursor: pointer; 
    } 
 
   #photoViewer .photoViewerWindow #photoViewerImageCon #navigationLeft:hover, 
   #photoViewer .photoViewerWindow #photoViewerImageCon #navigationRight:hover { 
    color: rgb(255, 255, 255); 
   } 
 
   #photoViewer .photoViewerWindow #photoViewerImageCon #navigationLeft 
   { 
    /*background-color:Aqua;*/ 
    width: 20%; 
    left: 0px; 
   } 
    
   #photoViewer .photoViewerWindow #photoViewerImageCon #navigationLeft span 
   { 
    position: absolute; 
    left: 20px; 
   } 
 
   #photoViewer .photoViewerWindow #photoViewerImageCon #navigationRight 
   { 
    /*background-color:Fuchsia;*/ 
    width: 80%; 
    right: 0px; 
   } 
 
   #photoViewer .photoViewerWindow #photoViewerImageCon #navigationRight span 
   { 
    position: absolute; 
 ...

JavaScript

$(document).ready(function() {
    //transition effect      
    $('#photoViewerMask').fadeIn();
    $('#photoViewerMask').fadeTo("slow", 0.8);

    //Get the window height and width 
    var winH = $(window).height();
    var winW = $(window).width();

    var borderSpace = 200;
    var minimumSize = 520;

    //Set width and height of photoviewer 
    if (winW > minimumSize) {
        if ((winW - borderSpace) > minimumSize) {
            $('#photoViewer .photoViewerWindow').css('width', winW - borderSpace);
        }
        else {
            $('#photoViewer .photoViewerWindow').css('width', minimumSize);
        }
    }
    if (winH > minimumSize) {
        if ((winH - borderSpace) > minimumSize) {
            $('#photoViewer .photoViewerWindow').css('height', winH - borderSpace);
        }
        else {
            $('#photoViewer .photoViewerWindow').css('height', minimumSize);
        }
    }

    var photoViewerWindow = $('#photoViewer .photoViewerWindow');
    var imageCon = $('#photoViewer .photoViewerWindow #photoViewerImageCon');
    var infoCon = $('#photoViewer .photoViewerWindow #photoViewerInfoCon');
    var infoHeader = $('#photoViewer .photoViewerWindow #photoViewerInfoCon #photoViewerInfoHeader');
    var InfoThumbs = $('#photoViewer .photoViewerWindow #photoViewerInfoCon #photoViewerInfoThumbs');

    //Set width and line-height of photo to show 
    $(imageCon).width($(photoViewerWindow).width() - $(infoCon).width());
    $(imageCon).css('line-height', $(photoViewerWindow).height() + 'px');

    //Set the popup window to center 
    $('#photoViewerDialog').css('top', winH / 2 - $('#photoViewerDialog').height() / 2);
    $('#photoViewerDialog').css('left', winW / 2 - $('#photoViewerDialog').width() / 2);

    //transition effect 
    $('#photoViewerDialog').fadeIn();
});

$('#navigationLeft').click(function() {
    alert('left');
});

$('#navigationRight').click(function() {
    alert('right');
});