JSFiddle - React, Tailwind, and code Playground

by AlexJsh02

HTML

<body>
 
<div id="wrapper">
    <h1>Super Simple Lightbox</h1>
    <p>Our super simple lightbox demo. Here are the image links:
        <ul>
            <li>
                <a href="https://farm7.static.flickr.com/6130/5935338876_47b61c93a5.jpg" class="lightbox_trigger">
                Picture 1
                </a>
            </li>
            <li>
                <a href="https://farm7.static.flickr.com/6020/5924329054_4bdc419c3a_o.jpg" class="lightbox_trigger">
                Picture 2
                </a>
            </li>
            <li>
                <a href="https://farm7.static.flickr.com/6020/5931933181_ddb737e528.jpg" class="lightbox_trigger">
                Picture 3
                </a>
            </li> 
        </ul>
     </p>
</div> <!-- #/wrapper -->
</body>

CSS

body {
    margin:0; 
    padding:0; 
    background:#efefef;
    text-align:center; /* used to center div in IE */
}
#wrapper {
    width:600px; 
    margin:0 auto; /*centers the div horizontally in all browsers (except IE)*/
    background:#fff; 
    text-align:left; /*resets text alignment from body tag */
    border:1px solid #ccc;
    border-top:none; 
    padding:25px; 
    /*Let's add some CSS3 styles, these will degrade gracefully in older browser and IE*/
    border-radius:0 0 5px 5px;
    -moz-border-radius:0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px; 
    box-shadow:0 0 5px #ccc;
    -moz-box-shadow:0 0 5px #ccc;
    -webkit-box-shadow:0 0 5px #ccc;
}

#lightbox {
    position:fixed; /* keeps the lightbox window in the current viewport */
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    /*background:url(overlay.png) repeat;*/
    background: rgba(0,0,0,.7);
    text-align:center;
}

#lightbox p {
    text-align:right; 
    color:#fff; 
    margin-right:20px; 
    font-size:12px; 
}

#lightbox img {
    box-shadow:0 0 25px #111;
    -webkit-box-shadow:0 0 25px #111;
    -moz-box-shadow:0 0 25px #111;
    max-width:940px;
}

JavaScript

// Super simple lightbox
jQuery(document).ready(function($) {
    // Our script will go here

    $('.lightbox_trigger').click(function(e) { 
        // Code that makes the lightbox appear
        e.preventDefault();
        var image_href = $(this).attr("href");
        if ($('#lightbox').length > 0) { // #lightbox exists
             //insert img tag with clicked link's href as src value
            $('#content').html('<img src="' + image_href + '" />');
     
            //show lightbox window - you can use a transition here if you want, i.e. .show('fast')
            $('#lightbox').show();
        }
        else { //#lightbox does not exist 
            //create HTML markup for lightbox window
            var lightbox = 
            '<div id="lightbox">' +
            '<p>Click to close</p>' +
            '<div id="content">' + //insert clicked link's href into img src
            '<img src="' + image_href +'" />' +
            '</div>' +    
            '</div>';
            //insert lightbox HTML into page
            $('body').append(lightbox);
        }
    });
    
    $('#lightbox').live('click', function() {
        $('#lightbox').hide();
    });

});