How to Add jQuery Modal Image Gallery Plugins

Download the jQuery Modal Image plugin from GitHub repository and unzip the folder. You get there in the folder two files, one modal.js, and another is style.css file.

Open the file with your favorite code editor and change the class with your image class name. For mine, the image class name is .img-frm img. Copy this CSS code and paste at the below in your theme’s style.css file. Save the changes.

/* Style the Image Used to Trigger the Modal */
.img-frm img { /* Change the class name with yours */
    cursor: pointer;
    transition: 0.3s;
}

.img-frm img:hover {opacity: 0.7;} /* Change the class name with yours */

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption { 
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

Do the same job for the modal.js file, change the class with your class name. After changes upload the file to your active WordPress theme directory. If you found any js folder put the file into it.

jQuery( document ).ready(function(){
    // Add Modal HTML to body
    jQuery('body').append( "<div id=\"myModal\" class=\"modal\"><span class=\"close\">&times;</span><img class=\"modal-content\" id=\"img01\"><div id=\"caption\"></div></div>");

    // Get the image and insert it inside the modal - use its "alt" text as a caption
    jQuery(".img-frm img").on("click", function(){ // Change the class name ".img-frm img" with yours
        var image = jQuery(this).attr("src");
        var captext = jQuery(this).attr("alt");
        jQuery(".modal").css("display","block");
        jQuery("#img01").attr("src", image);
        jQuery("#caption").html( captext );
        
        // When the user clicks on <span> (x), close the modal
        jQuery("#myModal .close").on("click", function(){
            jQuery(".modal").css("display","none");
        });
    });
});

.Now, let’s call the jQuery file. Open theme’s functions.php file and add the piece of code below.

// Load Script
add_action( 'wp_enqueue_scripts', 'selected_option_js' );

function selected_option_js() {
    
    wp_register_script( 'sm-modal-script', get_template_directory_uri() . '/js/modal.js', array( 'jquery' ), '1.0.0', true );

    wp_enqueue_script( 'sm-modal-script' );

}