Image preview on hover over a hyperlink field

05.05.2010 Updated code to adapt the position of the image depending on height and width (and scroll) of the page relative to the image size.

---

I got this request from Mark:

Hi Alexander,

I did not include the column as a picture because they are to big to display in the list view. For this reason I setup a list with a hyperlink to the image.

Besides it would look terrible having a list that displays all these large pictures in a list view. For that reason, I have been trying to find some way to display an image from a list when a user hovers over a row or column.

---

Add this code to a CEWP below the list view, and it will add a hover function to all hyperlinks including an image (add more types to the array “arrOfImageTypes”):

<script type="text/javascript" src="../../Javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript">

function imagePreview(){
arrOfImageTypes = ['jpg','jpeg','gif','png'];
	$("table.ms-listviewtable td.ms-vb2 a").hover(function(e){
		var href = this.href;
		var img = href.substring(href.lastIndexOf('.')+1).toLowerCase();
		if(href.indexOf('http')==0 && $.inArray(img,arrOfImageTypes)>-1){
		    $("body").append("<img id='preview' src='"+ this.href +"' alt='Image preview' />");	
		}
		var obj = $("#preview");		
		var offset = $(this).offset();
		var winHeight = $(window).height();
		var winWidth = $(window).width();
		var scrollLeft = $(window).scrollLeft();
		var scrollTop = $(window).scrollTop();
		var objHeight = obj.outerHeight();
		var objWidth = obj.width()+15;
		if(((winWidth+scrollLeft)-offset.left)<objWidth){
			offset.left=((winWidth+scrollLeft)-objWidth);
		}
		var maxHeight = (winHeight+scrollTop)-offset.top;
		if(objHeight>maxHeight){
			if(offset.top-scrollTop>objHeight){
				offset.top=offset.top-objHeight-20;
			}
			height = (objHeight<winHeight)?objHeight:winHeight;
		}							 
		obj.css({"position":"absolute","top":(offset.top+20)+"px","left":offset.left+20})
		.fadeIn("fast");						
	},
	function(){
		$("#preview").remove();
	});			
};

// Call the script on page load
$(document).ready(function(){
	imagePreview();
});
</script>

Regards
Alexander