SharePoint: 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.
Guest Author: Alexander Bautz
SharePoint JavaScripts
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
Guest Author: Alexander Bautz
SharePoint JavaScripts
Alexander Bautz is a SharePoint consultant/developer (mainly JavaScript/jQuery solution) living in Norway. Alexander spends a lot of his spare time blogging on the same topics. His focus area is "end user customizations" with no (or as little as possible) server side code.
Like to see a screen shot of this, if possible
Hi Frank,
I have updated the original article Image preview on hover over a hyperlink field, and added some logic to adapt the position of the image depending on height and width (and scroll) of the page relative to the image size.
I have included a screenshot as well.
This article is a cross post and i do not have edit access so somebody at EUSP must update this article if it is to reflect the latest changes.
Alexander
Alexander – Send the updated article to Natasha and we’ll publish it as a new article. Thanks. — Mark
Checked out the link and it looks cool. I’m going to try it on my ’sandbox’ before adding it to our production.
Thanks
I have updated the code snippet. Please see the note at the top of this article. — Mark
Is it possible to do something like this for an Announcement item page?
Hi,
Yes it is.
Just change the “target” in line 6 in the code block to match your “container”. The exact code depends on your setup so you would want to get IE Developer toolbar or Firebug for Firefox to identify the right “spot”.
Alexander
Used this solution last night to create a mouseover of the book covers in my 5 year old’s Bookshelf Organizer that we are building in SharePoint. Take a look…
http://twitpic.com/1leqe8
Really nice! Can’t wait to see the full solution.
Ok, I missed something here (and my apologies if the missing piece is on Alexander’s original blog…our company filters are blocking his site). So I set up the list with a hyperlink column, put the code in a CEWP and placed it below the list webpart, and added an item w/ a link to a .gif. But when I hover over the hyperlink, nothing happens. Where did I go wrong?
Thanks – love this solution! Hope I can get it to work!
My first guess is the location of jQuery. The script src must point to your locale copy, or to code.jquery.com:
Alexander
That worked perfectly, Alexander…thank you so much!!
Created a one minute screencast of SharePoint Bookshelf Organizer: Version .01. The solution uses Alexander’s technique for displaying images upon MouseOver.
Yes, that is a great image feature.
Once I chagned the URL for the “jquery” reference it worked perfectly.
Hello Mr.Alexander,
Nice feature to see !!.
I have a different requirement as below,
I need to show a tooltip for a list “field header” and not list items. Since, the field description can be seen only by users with edit permissions, i need to show the description of the field as tooltip for all read-only users of the list, when user hovers the mouse on list field header.
Could you please check and help me on the same?
Thank you.
Hello Mr.Alexander,
Could you please help on this?
Thank you.
Hi,
I’m not quite sure what you mean by “field header”. Is it the label for a field in DispForm?
For me to help you with this one, i would like you to post a request over at my blog with some more description on what you want.
Alexander