html 点击图片放大

#layer_image_img img{
        width: 500px;
        height: 500px;
    }
<a data-toggle="modal" href="#layer_image" data-image="{$item}">
                    <img style="width: 50px;height: 50px;" src="{$item}">
</a>

<div id="max_div" style="display:none;position: fixed;top: 47%;left: 25%;z-index: 9999;">
<span id="del_max_div" style="position: absolute;left: 100%;">
    <i class="icon-remove-sign" style="font-size: 30px;"></i>
</span>
<img id="max_img_img" src="" alt="">
</div>
$(".image-bigger").click(function(){
        var src = $(this).attr('src');
        console.log(src);
        $("#max_img_img").attr('src',src);
        $("#max_div").show();
    });
    $("#del_max_div").click(function(){

        $("#max_img_img").attr('src','');
        $("#max_div").hide();
    });