Javascript 使用jQuery单击较小的图像时，在模式类型窗口中显示较大的图像

我正在为web开发项目构建一个投资组合。当您查看一个特定项目时，它最多可以有10个屏幕截图。这些屏幕截图总是比我想显示的要小，因为必须在图像旁边安装一个描述部分，以及在960pz宽的分区内安装所述描述和图像

我想尝试的解决方案是在点击较小的屏幕截图图像时显示较大的屏幕截图

较大的屏幕截图将加载图像，该图像将在data big img soi的Images DATAattribute中定义。加载网页时显示的图像的最终标记如下所示

<img src="http://i.imgur.com/FvJRySW.png" data-big-img="​http://i.imgur.com/FvJRySW.png" class="projectImgSmall" width="600" title="Click to View Full Size Image">

以下是我的一些目标

为了能够加载2个单独的图像文件，我可以在同一个文件或完全不同的文件中进行单击加载，这是通过从我的自定义数据属性获取图像URL来完成的 无论较大图像的大小如何，都应缩小其大小，以便在屏幕上仍然可以看到较大的图像。现在，这意味着一个高图像可能需要调整大小，使其看起来很瘦，因为弹出模式/图像固定在屏幕上。事实上，虽然我很想用一个固定的宽度大小，让大图像的高度自动调整……这意味着我需要用某种方式让固定的覆盖图像在页面上向下滚动，但我更喜欢这个，因为我在想它。如果可以的话，请帮忙做这件事。 现在，对于我在下面提出的JS代码，它并不总是工作得很好。在某些桌面屏幕上，它会显示一个居中的大图像，但有些图像不居中。此外，当在移动类型屏幕上查看时，它会将弹出的图像显示为一个微小的图像。 我真的很希望大的弹出图像总是集中在屏幕上，无论屏幕大小，以及始终是一个特定的最小宽度，从来没有超过最大宽度。我认为以百分比为基础的宽度是解决这个问题的方法。 另一个问题是，在我的localhost服务器上，当从“我的数据”属性加载图像时，图像确实发生了变化。然而，当我在codePen或JSFiddle这样的网站上运行这个程序时，它会在我在DEV工具中查看源代码时显示IMG src被替换为新的图像，但是在屏幕上它会因为某种原因显示一个损坏的图像吗？ 这就是我目前所能想到的……我的代码在我的开发服务器上运行，除了上面的问题。不总是居中，在小屏幕上不好。如果我可以改变这一点，让大图像向下滚动，看到它，这将是完美的，让我有一个很好的固定宽度 HTML

<div id="projectOverlay"></div>
<div id="projectOverlayContent">
    <img id="projectImgBig" src="" alt="" width="400"  title="Click to close large image"/>
</div>

JavaScript/jQuery

$(function() {

    // Show Large Project photo when smaller image is clicked on
    // <img class="projectImgSmall" width="200" src="150.png" data-big-img="big.png">
    $(".projectImgSmall").click(function(){
        var bigImg = $(this).data("big-img");
        var height = $( window ).height()-100;
        var width = $( window ).width()-200;


        //$(this).attr("src", $(this).attr("href"));
        $("#projectImgBig").attr("src",bigImg);
        $("#projectOverlay").show();
        $("#projectImgBig").css({
            'max-height': height,
            'max-width': width,
        });
        $("#projectOverlayContent").css({
            'max-height': height,
            'max-width': width,
            "position": "fixed",
             top:'50%',
             left:'50%',
             margin:'-'+(height / 2)+'px 0 0 -'+(width / 2)+'px'
        }).fadeIn(1000);
    });

    $("#projectOverlayContent, #projectOverlay").click(function(){
        $("#projectImgBig").attr("src", "");
        $("#projectOverlay").hide();
        $("#projectOverlayContent").hide();
    });

});

---

是否每个项目都会在一个页面上列出，并且当单击时，会将用户带到一个新的页面，该页面专门用于该项目，并带有较小的缩略图、说明和隐藏的较大图像？您是否已经看过一些好的jQuery插件，它们可以实现与您想要实现的类似的功能？例如：