如何使用jQuery将全尺寸图像添加到网页中心？

我的网站设置方式是，我有一个基于用户屏幕分辨率大小的缩略图网格，其中还包含一个滚动机制。我尝试添加的另一个功能是，可以单击缩略图，并使您单击的图像以全尺寸（或尽可能接近全尺寸而不脱离屏幕）显示在屏幕中央的黑色透明覆盖层上。我意识到这方面有插件，但为了学习和熟悉，我正在尝试自己做

这是我到目前为止所拥有的

$('a.cell').click(function()    {
        $('<div id = "overlay" />').appendTo('body').fadeIn("slow");
        var src = $('img', this).attr("src");           
    });

$（'a.cell'）。单击（函数（）{
$（''）.appendTo（'body'）.fadeIn（“慢”）；
var src=$（'img'，this）.attr（“src”）；
});

此函数用于将覆盖应用于整个页面，这样做很好，然后从用户单击的缩略图中检索图像的路径。缩略图是“img”标记，是“cell”类“a”标记的子标记，大小为100x100，“src”是实际图像的路径。我还没有任何单独的缩略图或调整大小/重采样机制，但我计划稍后添加。在这一部分之后，我发现自己陷入了下一步该写什么的困境。图像需要转到页面的中心，淡入并调整大小，使其要么为全尺寸，要么尽可能接近，而不会超出浏览器的边界。我正在尝试实现的另一个重要功能是在屏幕中央有一个加载动画，该动画将一直保留到图像准备好显示时，在不再需要时消失。

我相信插件应该提供您所需要的内容。

@Mike

我认为这是一个偏好的问题，因为有很多类似lightbox的插件

---

我个人推荐[fancybox]，因为它更轻（至少我认为是这样），并且做同样的事情。

既然您想学习如何做，下面是一个相对简单的示例。代码如下，并已发布至

注意：脚本假定缩略图和全尺寸图像相同。如果不同，可以将全尺寸图像URL存储在image

rel

属性中。然后只需将popupImage src更改为：

$（this）.find（'img'）.attr（'rel'）

CSS

HTML示例

<a class="cell"><img src="http://i47.tinypic.com/2m2c36v.jpg" width="30" /></a>

剧本

$(document).ready(function(){
 $('a.cell').click(function(){

  // Add overlay
  $('<div id="overlay" />')
   .hide()
   .appendTo('body')
   .fadeIn('slow');

  // Add image & center
  $('<img id="popupImage" src="' + $(this).find('img').attr('src') + '">').appendTo('body');
  var img = $('#popupImage');
  var imgTop = ($(window).height() - img.height())/2;
  var imgLft = ($(window).width() - img.width())/2;
  img
   .hide()
   .css({ top: imgTop, left: imgLft })
   .fadeIn('slow');

  // Add click functionality to hide everything
  $('#overlay,#popupImage').click(function(){
   $('#overlay,#popupImage').fadeOut('slow',function(){
     $(this).remove();
     $('#overlay').remove();
   });
  })
 });
})

$（文档）.ready（函数（）{
$（'a.cell'）。单击（函数（）{
//添加覆盖层
$('')
.hide（）
.appendTo（'正文'）
.fadeIn（“慢”）；
//添加图像中心（&C）
$（''）。附于（'正文'）；
var img=$（'popupImage'）；
var imgTop=（$（window.height（）-img.height（））/2；
var imgLft=（$（window.width（）-img.width（））/2；
img
.hide（）
.css（{top:imgTop，left:imgLft}）
.fadeIn（“慢”）；
//添加单击功能以隐藏所有内容
$（“#覆盖，#弹出图像”）。单击（函数（）{
$（“#覆盖，#弹出图像”）.fadeOut（'slow'，function（）{
$（this.remove（）；
$（“#覆盖”）.remove（）；
});
})
});
})

这也是一个不错的选择。不仅是正文，您还可以将所有图像集中填充到任何div容器中

谢谢。这或多或少就是我一直在寻找的。我会加上一些数学上的东西，比如一个对窗口来说太大的图像，然后我想这会给它我想要的所有功能。您的代码也是我可以坐下来研究一下的东西，以便更好地理解Javascript和jQuery的工作原理，因为我对两者都比较陌生。我已经习惯了更多的服务器和面向对象的语言，比如C系列和PHP，所以有时候重叠和差异的特性会让我感到不舒服。再次感谢。请随时询问有关代码的任何问题。此外，我认为您可以使用CSS

max width:100%

和

max height:100%

限制图像大小，但如果这不起作用，请使用脚本。。。e、 g.

$（'#popupImage'）.attr（'max-width'，$（window.width（））

$(document).ready(function(){
 $('a.cell').click(function(){

  // Add overlay
  $('<div id="overlay" />')
   .hide()
   .appendTo('body')
   .fadeIn('slow');

  // Add image & center
  $('<img id="popupImage" src="' + $(this).find('img').attr('src') + '">').appendTo('body');
  var img = $('#popupImage');
  var imgTop = ($(window).height() - img.height())/2;
  var imgLft = ($(window).width() - img.width())/2;
  img
   .hide()
   .css({ top: imgTop, left: imgLft })
   .fadeIn('slow');

  // Add click functionality to hide everything
  $('#overlay,#popupImage').click(function(){
   $('#overlay,#popupImage').fadeOut('slow',function(){
     $(this).remove();
     $('#overlay').remove();
   });
  })
 });
})