如何使用jQuery将完整大小的图像添加到网页的中心？ [英] How to add a full-sized image to the center of a webpage using jQuery?

问题描述

我的网站设置方式是，我有一个网格的缩略图，它的大小基于用户的屏幕分辨率，并且还有一个滚动机制。我要添加的另一个功能是，点击缩略图，并让您点击的图片以全尺寸（或尽可能接近完整尺寸，而不会离开屏幕）显示在屏幕中心的顶部一个黑色透明覆盖。我知道有插件，但我试图做自己的为了学习和熟悉的缘故。

The way I have my site setup is that I have a grid of thumbnails that is sized based on the user's screen resolution and also has a scrolling mechanism in it. Another feature I'm trying to add is the ability to click on a thumbnail and have the image you clicked appear in the center of the screen at full size (or as close to full size as possible without going off the screen) on top of a black transparent overlay. I realize there are plug-ins for this but I'm attempting to do my own for the sake of learning and familiarity.

这是我到目前为止。

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

此函数用于将叠加应用于整个页面，从用户点击的缩略图中检索图像的路径。缩略图是'img'标签，它们是'a'标签的子类，'cell'类，它们的大小为100x100，'src'是实际图像的路径。我没有任何单独的缩略图或调整大小/重采样机制，但它是我计划稍后添加的东西。在这部分后，我发现自己卡住了下一步写什么。该图像需要到页面的中心，淡入和大小，以便它是它的完整大小或尽可能接近，没有运行在浏览器的边界。我想实现的另一个重要的功能是在屏幕的中心加载动画，直到图像准备好显示，并在不再需要时离开。

This function is meant to apply the overlay to the entire page, which it does just fine, and then retrieve the path of the image from the thumbnail the user clicks on. The thumbnails are 'img' tags which are children of 'a' tags with the class of 'cell', they are sized at 100x100 and the 'src' is the path to the actual image. I don't have any separate thumbnails or resizing/resampling mechanism just yet but it's something I plan to add later. After this part I find myself stuck what to write next. The image needs to go to the center of the page, fade in and be sized such that it is either its full size or as close as it can be without running over the boundaries of the browser. Another important feature I'm trying to implement is to have a loading animation in the center of the screen that stays until the image is ready to be shown and goes away when it's no longer needed.

推荐答案

由于你想学习如何做到这一点，这里是一个相对简单的例子。代码位于下面，并发布到此粘贴程序。

Since you want to learn how to do this, here is a relatively simple example. The code is below and also posted to this pastebin.

注意：脚本假定缩略图和全尺寸图像相同。如果图片 rel 属性不同，您可以将完整大小的图片网址存储在图片中。然后只需将popupImage src更改为： $（this）.find（'img'）。attr（'rel'）

Note: The script assumes that the thumbnail and full-sized image are the same. You can store the full size image URL in the image rel attribute if it is different. Then just change the popupImage src to this: $(this).find('img').attr('rel')

CSS

#overlay {
 position: absolute;
 left: 0;
 top: 0;
 height: 100%;
 width: 100%;
 background: #000;
 opacity: 0.8;
 filter: alpha(opacity=80);
}
#popupImage {
 position: absolute;
 left: -99999px;
 top: 0;
}

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();
   });
  })
 });
})

这篇关于如何使用jQuery将完整大小的图像添加到网页的中心？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！