I got this request from Jewell from my previous post:
“Is there away to apply this to a document library?”
Here are the steps to add a pic of a magnifying glass to a column in a Document Library.
So that when your mouse hovers, it displays the first page of the PDF inside an iFrame window.The only down-side to having this implemented, is that as the user hovers over each PDF, it needs to download the entire PDF file to display the first page.
* Document Library with the PDF Preview column added
* On Mouse-Over
Step 1: First you’ll need to create a workflow that copies the Document Name to the Title column.
Follow this post to do exactly that: http://www.knowledgegroup.no/blogg/post/2012/05/13/Add-filename-in-title-field-using-workflow.aspx
Step 2: Go to http://cssglobe.com/easiest-tooltip-and-image-preview-using-jquery/ and download the Scripts Zip file.
You’ll need the 3rd Example files uploaded to a Document Library to hold your script files.
Step 4: Create a html file in the same folder as your scripts and paste the following:Don’t forget to change the paths to your script files.
="<DIV><a href='..\"&Title&".pdf' class='screenshot' rel='..\"&Title&".pdf' ><img border='0' src='/_layouts/images/MAGNIFY.GIF' alt='' style='padding-right: 5px; padding-left: 5px; vertical-align:bottom'></a></DIV>"