How to add a full-sized image to the center of a webpage using jQuery?

Question

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.

Here's what I have so far.

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

Answer 1

I believe the lightBox plugin should provide exactly what you are looking for.

Answer 2

@Mike

I think that's a matter of preference, as there are a ton of lightbox-like plugins.

I'd personally recommend [http://fancybox.net/ fancybox] just because it's more lightweight (at least I think) and does the same thing.

Answer 3

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.

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 example

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

Script

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