Advanced Search

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

/ Published in: jQuery
Save to your folder(s)
CSS needed here:
` #largeImage
{
position: absolute;
left: 50%;
top: 50%;
visibility: visible;
} `

Dead Centre modified from: [Dead Centre a Div](http://snipplr.com/view/231/dead-centre-a-div/ "Dead Centre a Div").

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.