locked
Show Image on hover over column url (Custom List from Excel) RRS feed

  • Question

  • Hi,

    I'm using a Cloud based version of Sharepoiint where I have an imported parts list. I have added a column for the Part Picture and in this I have populated links to the image (png).

    Is it possible to add some script in the webparts script (jQuery) maybe to achieve this.

    I have followed a few posts on the web and forums and unable to achieve the image being displayed on hover over.

    I'm sure there is something I am missing, I have my full jQuery path and version ready to use I just need a working method to get this done.

    If I can provide any more information on this I certainly will and I'd appreciate any support.

    Many Thanks

    Cecil B

    Tuesday, February 21, 2017 4:23 PM

All replies

  • Do the following steps:

    1. Edit the list view page and add a script editor webpart.

    2. Copy the following script and paste it within the script editor:

    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
    
    function imagePreview(){
        var 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();
    	});
    };
    
    ExecuteOrDelayUntilScriptLoaded(imagePreview, "sp.js")
    </script>

    3. Save the page and reload the page by pressing Ctrl+F5

    Hope this will work for you.


    Avijit Sur

    Saturday, March 4, 2017 6:56 PM