Posted By

chendrix on 11/07/10


Tagged

dead centre hover center


Versions (?)

Who likes this?

5 people have marked this snippet as a favorite

NyX
laurentzziu
Some0ne
johnw
withremote


Hover over a thumbnail and open up a dead centered larger version


 / Published in: jQuery
 

CSS needed here: #largeImage { position: absolute; left: 50%; top: 50%; visibility: visible; }

Dead Centre modified from: Dead Centre a Div.

  1. // For a link like <a href="one.jpg"><img src="oneThumbNail.jpg" /></a>
  2. $('a').hover(function(e) {
  3.  
  4. // Mouse on
  5.  
  6. // Get the linked large image from thumbnail anchor's href
  7. var href = $(this).attr('href');
  8.  
  9. // Get the alternative text of the thumbnailed image
  10. var altText = $(this).children().attr('alt');
  11.  
  12. // Create a containing div#horizon and inside of it create an image from the large version of the thumbnail
  13. // Hide the image to begin with, and append it to the body element
  14. $('<img id="largeImage" src="' + href + '" alt="large version of '+ altText +'" />')
  15. .hide()
  16. .appendTo('body');
  17.  
  18.  
  19. // Get the width and height of the new image, and calculate the margin-top: and margin-left: values necessary to deadCentre the image
  20. var imgWidth = $('img#largeImage').attr('width');
  21. var imgHeight = $('img#largeImage').attr('height');
  22. var topVal = -(imgHeight/2);
  23. var leftVal = -(imgWidth/2);
  24.  
  25. // Apply the necessary css to deadCentre the image
  26. $('img#largeImage').css({'margin-top': topVal, 'margin-left': leftVal});
  27.  
  28. // Make the image visible
  29. $('img#largeImage').show()
  30.  
  31. }, function() {
  32.  
  33. // Mouse off
  34.  
  35. // Remove the image from the DOM
  36. $('img#largeImage').remove();
  37. });
  38.  
  39. // Render the anchor unclickable
  40. $('a').click(function() {
  41. return false;
  42. });

Report this snippet  

You need to login to post a comment.