Javascript Example to Display Image in Magnific Lightbox Popup Modal Window Using Form Input Element

Welcome folks today in this blog post we will be displaying user selected image using the input element inside the magnific lightbox popup modal window in javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
</head>

<body>
    <a href="https://images.unsplash.com/photo-1670272505284-8faba1c31f7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHw2fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60"
        class="image-popup">
        <img src="https://images.unsplash.com/photo-1670272505284-8faba1c31f7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHw2fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60"
            alt="Placeholder"></a>
    <script>
        $(document).ready(function () {
            $('.image-popup').magnificPopup({
                type: 'image'
            });
        });
    </script>
</body>

</html>

<!DOCTYPE html>

<head>

href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" />

</head>

<body>

<a href="https://images.unsplash.com/photo-1670272505284-8faba1c31f7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHw2fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60"

class="image-popup">

<img src="https://images.unsplash.com/photo-1670272505284-8faba1c31f7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHw2fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60"

alt="Placeholder"></a>

$(document).ready(function () {

$('.image-popup').magnificPopup({

type: 'image'

});

</script>

</body>

</html>

As you can see in the above code we are including the cdn of the magnific popup library and also the jquery cdn as well. And then we are displaying the image inside the img tag and we have added the image-popup class. And also inside the javascript code we are initializing the popup plugin where we are using the magnificPopup() method to display the image.