Posted By

chendrix on 11/07/10

Tagged

center

Versions (?)

Last Edited at 11/07/10 02:27pm

Statistics

Viewed 639 times

Favorited by 4 user(s)

Related snippets

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](http://snipplr.com/view/231/dead-centre-a-div/ "Dead Centre a Div").

Highlighted TextExpand

// For a link like <a href="one.jpg"><img src="oneThumbNail.jpg" /></a>
	$('a').hover(function(e) {
	
		// Mouse on
		
                // Get the linked large image from thumbnail anchor's href
		var href = $(this).attr('href'); 
		
                // Get the alternative text of the thumbnailed image
		var altText = $(this).children().attr('alt'); 
		
		// Create a containing div#horizon and inside of it create an image from the large version of the thumbnail
		// Hide the image to begin with, and append it to the body element
		$('<img id="largeImage" src="' + href + '" alt="large version of '+ altText +'" />')	
		.hide()
		.appendTo('body');
		
		
		// Get the width and height of the new image, and calculate the margin-top: and margin-left: values necessary to deadCentre the image
		var imgWidth = $('img#largeImage').attr('width');
		var imgHeight = $('img#largeImage').attr('height');
		var topVal = -(imgHeight/2);
		var leftVal = -(imgWidth/2);
		
		// Apply the necessary css to deadCentre the image
		$('img#largeImage').css({'margin-top': topVal, 'margin-left': leftVal});
		
		// Make the image visible
		$('img#largeImage').show()
		
	}, function() {
	
		// Mouse off 
		
		// Remove the image from the DOM
		$('img#largeImage').remove();
	});
	
	// Render the anchor unclickable
	$('a').click(function() {
		return false;
	});

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.