I have a webpaage which has more number of images which are in fixed size, Because it was designed long back. Even if the images are large, it will be shown in fixed width and height. I have constraint in adding additional library like bootstrap or even i can't go and edit images in all pages.

So come-up with this below idea to add effects to existing images.

To get lightbox popup image effects to existing webpage, you need to add few lines of HTML, CSS and Javascript(JQuery) to the pages will show lightbox effect for pages.

Add the below html code to existing page.

<div id="lightbox-img">
    <div id="lightbox-page">
        <img id="lightbox-content"src="#">
        <p>Click to close</p>
    </div>
</div>

This tags are hidden by default with this below CSS.

#lightbox-img{
    position:fixed; /* keeps the lightbox window in the current viewport */
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    text-align:center;
    display: none;
    background-image: url(/images/background.png);
    z-index: 9999999;
}
#lightbox-content{
    margin: auto;
    background-color: #fff;
}
#lightbox-page p {
    color: #fff;
}
#lightbox-img img {
    margin: auto;
    box-shadow:0 0 25px #111;
    -webkit-box-shadow:0 0 25px #111;
    -moz-box-shadow:0 0 25px #111;
    max-width:940px;
}
#lightbox-page{
    padding-top:10px;
}

Add this baground image which has 50% opacity.

background.png

With this above HTML and CSS, IMG tag is added to your page and hidden. To manuplate the click on open image in popup annd the below javascript. This script needs JQuery.

jQuery('img').click(function(event){
    jQuery('#lightbox-img').fadeToggle('slow');
    jQuery('#lightbox-content').attr('src',this.src);
});
jQuery('#lightbox-img').click(function(event){
    jQuery('#lightbox-img').fadeToggle('slow');
});

This img click event will trigger if user clicks on any image in the page, will display the hidden 'lightbox-img' div and load the image to the 'lightbox-content' image tag.