Ads & Techs

Responsive lightbox

HTML & CSS

26 August 2021

Learn to create custom image-video lightbox using html, css, bootstrap, jquery, javascript and plyr.

DEMO Setup

                                                
    
<!-- bootstrap -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
<!-- bootstrap -->

<!-- css -->
<link rel="stylesheet" href="/index.css">
<!-- css -->

<!-- js -->
<script src="/index.js"></script>
<!-- js -->

<!-- iconify -->
<script src="https://code.iconify.design/1/1.0.6/iconify.min.js"></script>
<!-- iconify -->

<!-- plyr -->
<script src="https://cdn.plyr.io/3.6.8/plyr.polyfilled.js"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css" />
<!-- plyr -->

HTML

                                                
    
<!-- data display -->
<div class="container">
    <div class="video-img-container">
        <!-- items -->
     </div>
</div>
<!-- data display -->

<!-- lightbox -->
<div class="lightbox">
    <div class="lightbox-top">
        <div class="lightbox-top-left">
            <span onclick="hideLightbox()" title="Go back" class="iconify" data-inline="false" data-icon="ic:round-arrow-back"></span> 
        </div>
    </div>

    <div onclick="onClickedPrev()" id="prev-btn" class="lightbox-controller">
        <span title="Previous" class="iconify prev-btn-ico" data-inline="false" data-icon="grommet-icons:previous"></span>
    </div>

    <div class="lightbox-viewer">
        <!-- / video / image container -->
    </div>

    <div onclick="onClickedNext()" id="next-btn" class="lightbox-controller">
        <span title="Next" class="iconify next-btn-ico" data-inline="false" data-icon="grommet-icons:next"></span>
    </div>
</div>
<!-- lightbox -->

CSS

                                                
    
:root {
    --theme_color: #D9000D;
}

body.scroll {
    overflow: hidden;
  }

.video-img-container {
    padding: 40px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.video-img-container-itm {
    width: 350px;
    height: 200px;
    margin: 10px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    transition: .3s ease-in-out;
    cursor: pointer;
}

.video-img-container-itm .iconify {
    color: #fff;
    position: absolute;
    width: 60px;
    height: 60px;
}

.video-img-container-itm .player {
    width: 120%;
    height: 100%;
}

.lightbox {
    background-color: #000;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    user-select: none;
    transform: scale(0);
    transition: .3s ease-in-out;
    user-select: none;
}

.lightbox.active {
    transform: scale(1);
}

.lightbox-top {
    color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    z-index: 1000;
}

.lightbox-top-right {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lightbox-top-right-count {
    color: rgb(173, 173, 173);
    font-size: 18px;
    margin-right: 20px;
}

.lightbox-top-right-count span {
    color: rgb(173, 173, 173);
    font-size: 18px;
}

.lightbox-top .iconify {
    width: 25px;
    height: 25px;
    color: #fff;
    cursor: pointer;
}

.lightbox-top .iconify:hover {
    color: var(--theme_color);
}

.lightbox-controller {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 20px;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
}

.lightbox-controller .iconify {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    padding: 10px;
    color: #fff;
}

#prev-btn {
    left: 0;
}

#prev-btn:hover > .prev-btn-ico {
    background-color: rgba(255, 255, 255, 0.164);
    color: var(--theme_color);
}

#next-btn {
    right: 0;
}

#next-btn:hover .next-btn-ico {
    background-color: rgba(255, 255, 255, 0.164);
    color: var(--theme_color);
}

.lightbox-viewer {
    width: 100%;
    background-color: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-viewer img,
.lightbox-viewer audio,
.lightbox-viewer video {
    max-width: 100%;
    max-height: 100%;
}

                                                
    
        var data = [
            {
                public_id: 123,
                type: 0, // image
                url: "https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1050&q=80"
            },
            {
                public_id: 123,
                type: 1, // video
                url: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4"
            },
            {
                public_id: 123,
                type: 0,
                url: "https://images.unsplash.com/photo-1457369804613-52c61a468e7d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"
            },
            {
                public_id: 123,
                type: 0,
                url: "https://images.unsplash.com/photo-1493528237448-144452699e16?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1165&q=80"
            },
            {
                public_id: 123,
                type: 1,
                url: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
            },
            {
                public_id: 123,
                type: 1,
                url: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4"
            },
            {
                public_id: 123,
                type: 1,
                url: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4"
            },
            {
                public_id: 123,
                type: 0,
                url: "https://images.unsplash.com/photo-1505416795390-0beeb662b1f2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1051&q=80"
            },
            {
                public_id: 123,
                type: 0,
                url: "https://images.unsplash.com/photo-1512722328319-51c3d027c228?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
            },
            {
                public_id: 123,
                type: 0,
                url: "https://images.unsplash.com/photo-1580687580845-524eae9f69fb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2134&q=80"
            },
            {
                public_id: 123,
                type: 1,
                url: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WhatCarCanYouGetForAGrand.mp4"
            },
            {
                public_id: 123,
                type: 1,
                url: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/VolkswagenGTIReview.mp4"
            },
            {
                public_id: 123,
                type: 0,
                url: "https://images.unsplash.com/photo-1599192148293-d315c45e7c86?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=967&q=80"
            },
            {
                public_id: 123,
                type: 0,
                url: "https://images.unsplash.com/photo-1599753408328-b704f00319ad?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=564&q=80"
            },
            {
                public_id: 123,
                type: 0,
                url: "https://images.unsplash.com/photo-1617651805269-89dbb4e4097f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1952&q=80"
            },
            {
                public_id: 123,
                type: 0,
                url: "https://images.unsplash.com/photo-1580687580574-ea1a319f1388?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=634&q=80"
            }
        ]
        
        var currItm;
        
        // display data on array
        function displayData() {
            var videoImgContainer = document.getElementsByClassName('video-img-container')[0];
            
            if(data.length > 0) {
                videoImgContainer.innerHTML = data.map((itm, id) => {
                    if(itm.type == 0) { // Image
                        return `<div onclick="displayLightbox(${id})" class="video-img-container-itm" style="background-image: url(${itm.url})"></div>`;
                    }
        
                    if(itm.type == 1) { // Video
                        return `
                        <div onclick="displayLightbox(${id})" class="video-img-container-itm">
                            <span class="iconify" data-inline="false" data-icon="ic:baseline-play-circle-outline"></span>
                            <video class="player" id="">
                                <source src="${itm.url}#t=0.8" type="video/mp4" />
                            </video>
                        </div>`
                    }
        
                }).join('');
            }
        }
        
        // display data on array
        
        
        // display lightbox
        function displayLightbox(id) {
            var lightbox = document.getElementsByClassName('lightbox')[0];
            var viewer = document.getElementsByClassName('lightbox-viewer')[0];
            var prevBtn = document.getElementById('prev-btn');
            var nextBtn = document.getElementById('next-btn');
        
            currItm = id;
        
            if(id == 0) prevBtn.style.display = "none";
            else prevBtn.style = "";
        
            if(id == (data.length - 1)) nextBtn.style.display = "none";
            else nextBtn.style = "";
        
            if(!lightbox.classList.contains('active')) lightbox.classList.add('active');
            if(!document.body.classList.contains('scroll')) document.body.classList.add('scroll');
        
            if(data[id].type == 0) {
                viewer.innerHTML = `<img class="gl-viewer-container-itm" src="${data[id].url}" alt="">`;
            }
        
            if(data[id].type == 1) {
                viewer.innerHTML = `
                <video class="" id="player" controls autoplay>
                    <source src="${data[id].url}#t=0.8" type="video/mp4" />
                </video>
                `
                new Plyr('#player', {
                    debug: false,
                    blankVideo: '',
                    storage: {
                        enabled: false
                    },
                    controls: [
                        'play-large', // The large play button in the center
                        'play', // Play/pause playback
                        'progress', // The progress bar and scrubber for playback and buffering
                        'mute', // Toggle mute
                        'volume', // Volume control
                        'fullscreen', // Toggle fullscreen
                    ],
                });
            }
        }
        // display lightbox
        
        // go back function
        function hideLightbox() {
            var lightbox = document.getElementsByClassName('lightbox')[0];
            var player = document.getElementById('player');
        
            if(lightbox.classList.contains('active')) lightbox.classList.remove('active');
            if(document.body.classList.contains('scroll')) document.body.classList.remove('scroll');
        
            if(player) {
                player.pause();
            }
        }
        // go back function
        
        // Previous btn function
        function onClickedPrev() {
            var player = document.getElementById('player');
        
            if(player) {
                player.pause();
            }
        
            if(currItm != 0) {
                currItm -= 1;
                displayLightbox(currItm);
            }
        }
        // Previous btn function
        
        // Next btn function
        function onClickedNext() {
            var player = document.getElementById('player');
        
            if(player) {
                player.pause();
            }
        
            if(currItm < data.length-1) {
                currItm += 1;
                displayLightbox(currItm);
            }
        }
        // Next btn function
        
        // document on load
        $(function() {
            displayData();
        })
        // document on load

Download code