7

I have a custom webpart which shows all the documents belonging to the logged in User. I would like to show the preview of the document when user hover over on item in a webpart. How can i achieve this ?

Share
  • 483
  • 6
  • 17

3 Answers3

1

R u expecting the result would like below image or else something different mouse hover.

Example

Example 1

If this is the case then

  1. Download the file “PreviewItemOnHover.js” from here.
  2. Upload the file to a document library, or a folder created using SharePoint designer.
  3. Get the the CEWP code from the code block below. Change the jQuery and jQueryUI script src to refer local files if you prefer that. Get the files here and here.
  4. Change the script src to the file “PreviewItemOnHover.js” to reflect your local file location.
  5. Change the “argObj” in the function “init_preview” as described below.
  6. Place a CEWP in the page where you want the code to apply.
  7. Put this code in a text-file alongside the file “PreviewItemOnHover.js”, and refer it trough the content link option of the CEWP.

Script Code

<style type="text/css">
td.hoverMe{
background-color:#FCD116;;
}
td.hoverMe:hover{
background-color:transparent;
}
</style>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/sunny/jquery-ui.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.js">
</script>
<script type="text/javascript" src="/test/Scripts/PreviewItemOnHover.js">
</script>
<script type="text/javascript">
function init_preview(){
 var argObj = {arrOfFieldsToShow:[],
             dlgWidth:500,
             timeout:6000,               
             autoCloseLabel:'Closing in {0} seconds. Hover over the dialog to prevent it from closing.',
             hoverFirstTD:true,
             hoverImg:false,
             hoverImgSetup:{hoverTdIndex:2,
                    prepend:false,
                    imgSrc:'/_layouts/images/gosearch.gif'},
             editButton:{active:true,
                    btnText:"Edit item"}
             };
 previewItems(argObj);
 }
 </script>

More Reference: Preview metadata in list view on mouseover

Ronak Patel
  • 3,261
  • 3
  • 23
  • 45
san
  • 1,644
  • 7
  • 28
0

One of the Link below would solve your problem...

Aakash Maurya
  • 8,481
  • 4
  • 42
  • 74
Ankitkumar Malde
  • 1,473
  • 14
  • 28
0

It depends on the File type you are storing in the document library. There are web part that only shows PDF or doc or docx or xls.

Document Viewer Webpart MOSS

Aakash Maurya
  • 8,481
  • 4
  • 42
  • 74
susana
  • 21
  • 2
  • Look at Andre's post towards the bottom: http://social.technet.microsoft.com/Forums/en/sharepointgeneral/thread/0732039e-1d31-4e57-8f49-418f0747ccab – susana Jul 19 '12 at 05:00