jQueryのプラグインを複数使うとプラグイン同士が喧嘩をしていまうので私は手間がかからる時をのぞいて極力使わないようにしています。

以下のページで使用していますので、こちらを参考に説明します
【WordPress】プラグインなしで「読まれている記事」をランキング形式で表示する方法

【HTML】

<div id="subback"></div>
<img src="画像のURL" class="seimg">
<img src="画像のURL" class="seimg">

【CSS】

#subback {
    background-color: rgba(0,0,0,0.5);
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1000;
    display:none;
}

img.seimg:hover , img.sebimg:hover {
    cursor:pointer;
}

img.sebimg {
    position:absolute;
    display:none;	
    z-index:1500;
    width:90%;
    left:5%;
    border:10px solid #fff;
}

【jQuery】

$(function(){
$(window).on('load',function(){
    var n = $('img.seimg').length;
    if(n){
        for(var i=0; i<n ; i++){
            var imgurl = $('img.seimg').eq(i).attr('src');
            $('img.seimg').eq(i).after('<img class="sebimg" src="'+imgurl+'">');
        }
    }
});
	
$('img.seimg').on('click',function(){
    $('img.sebimg').removeClass('imgon');
    $('#subback').fadeIn();
    var seindex = $('img.seimg').index(this) ;
    $('img.sebimg').eq(seindex).fadeIn();
    var youhei = $('img.sebimg').eq(seindex).height() / 2 ;
    var sctoph = $(window).scrollTop();
    var winhei = $(window).height() / 2 ;
    $('img.sebimg').eq(seindex).css('top',sctoph+winhei-youhei);
});

$(document).on('click','#subback,img.sebimg',function(){
    $('#subback').fadeOut();
    $('img.sebimg').fadeOut();
});
});

まず、

【HTML】
最初の1行目window loadでクラス名「seimg」が付与された画像の個数を数え、それぞれの画像の下に拡大用の画像を非表示で挿入します。
【jQuery】 次に11行目の$(‘img.seimg’).on(‘click’)で画像をクリックした画像を拡大、背景を黒くするようにしています。
そして、22行目で画像または、背景をクリックした場合は画像を閉じるように設定しています。

試してはいないのですが、もし、大きくする画像を変えたい（大きな画像にしたい）などがあれば、【jQuery】の6行目の

$('img.seimg').eq(i).after('<img class="sebimg" src="'+imgurl+'">');

を

$('img.seimg').eq(i).after('<img class="sebimg" src="'+imgurl.replace(/^(.+)(\.[a-z]+)$/, "$1_l$2")+'">');

にすると、_lが付与された画像に置き換えれると思います。

まだ、改良の余地がありそうですが、とりあえずはこれでOKかなと思います。