Javascript 带有缩略图窗格的Jquery图像弹出窗口

我想在单击缩略图图像时将图像加载到Div中&当我单击Div中的图像时，它会在一个新窗口（全尺寸图像）中弹出，并将所有其他缩略图图像作为导航窗格。 我可以将图像加载到Div中&我的第二个要求与这个插件100%相似 . 但它需要DIV中所有带有缩略图图像源的锚定“”标记来加载缩略图窗格。 有没有人能帮我实现这一点，或者有没有其他带有缩略图窗格和弹出窗口的插件？ （ColorBox正常，但没有缩略图窗格）

@foreach（Model.Images中的var图像）
{


}
$（“.gallery项目a”）。单击（功能（evt）{
evt.preventDefault（）；
$（“#imageBox”）.empty（）.append(
$("

你有数百个插件@gurupasad Rao Tx，但我希望弹出图像下方有缩略图窗格&这些插件都没有这个选项。Gallerie是一个简单的JQuery插件，它提供了一个类似灯箱的图像库查看器。@Chukwuemeka Ihedoro是的。我提供的链接是“Gallerie JQuery插件”，但我的问题是无法将其应用于imageBox div中加载的图像。

<div class="col-sm-8" style="float:left">
    @foreach (var image in Model.Images)
    {
        <div class="gallery-item" id="gallery">
            <a href="~/@image.ImageUrl" class="gallery-tem">
                <img style="max-height:100px; max-width:100p src="~/@image.ThumbNailUrl" class="img-responsive" />
            </a> <br />
        </div>
    }
    </div>

    <div class="col-sm-4" id="imageBox" style=" float:left">
        &nbsp;
        <img src="~/@Model.MainImageUrl" />
    </div>

<script>

$(".gallery-item a").click(function (evt) {
    evt.preventDefault();
    $("#imageBox").empty().append(
        $("<img>", { src: this.href })
    );
});
<script/>