image - アニメーションレスポンシブ画像グリッド、クリック時に画像を拡大する方法は?

Question

私は自分のウェブサイトで Animated Responsive Image Grid を使用していますが、うまく機能しています。

https://github.com/codrops/AnimatedResponsiveImageGrid

ただし、ユーザーが画像をクリックすると、画像が（元の寸法で）飛び出し、残りの背景がぼやける、つまり、ファンシーボックスタイプの方法を開発することを望みます。

スクリプトは、画像ではなく背景画像で再生されることがわかりました。

これを使ってbg-imageを保存してみましたが、

$('#ri-grid ul li a').click(function(){
    var bg = $('#ri-grid ul li a').css('background-image');
        bg = bg.replace('url(','').replace(')','');
        alert(bg);
});

私のHTML部分は

<div id="container">
    <div id="ri-grid" class="ri-grid ri-grid-size-3">
        <ul>
        <li><a href="#"><img src="images/medium/1.jpg"/></a></li>
        <li><a href="#"><img src="images/medium/2.jpg"/></a></li>
        </ul>
    </div>
</div>

CSS

#container
{
    position:relative;
    width:100%;
    min-height:90%;
}

#ri-grid ul
{
    margin:0;
    padding:0;

}
#ri-grid ul li{
-webkit-perspective: 400px;
-moz-perspective: 400px;
-o-perspective: 400px;
-ms-perspective: 400px;
perspective: 400px;
margin: 0;
padding: 0;
float: left;
position: relative;
display: block;
overflow: hidden;
background: #000;
}

#ri-grid ul li a{
         filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(50%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
display: block;
outline: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
background-color: #333;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

.ri-grid-size-3 {
width: 100%;
margin-top: 0px;
}

.ri-grid {
margin:30px auto 30px;
position: relative;
height: auto;
top:-30px;
}

誰でも私を助けてもらえますか？