SharePoint 2020

The Vision for a Future of Clarity

Display PDF Thumbnail Preview on Hover in Search Results Web Part

This solution, provides an easy way to display a thumbnail view of a PDF file in SharePoint 2010 Search Results.

The idea for this useful feature came from here: http://cssglobe.com/easiest-tooltip-and-image-preview-using-jquery/ using  example 3, when you mouse over the link a pop-up thumbnail of a jpg is displayed.

So with a combination of a PDF in an iframe such as my previous article, a slight modification of the Javascript code (main.js) and some add-on code in the xslt of the search results web part, we achieve a thumbnail preview of all PDF file Search Results.

PDF Preview in Search Results

Steps to add this feature:

1: Download the Word doc below, PDF thumbnail script.docx, copy the contents to a new file and call it “main.js”, upload it to your script library. Because WordPress strips out iframe tags, this is the easiest option.

PDF thumbnail script .docx

2: Place the following into a .html file and upload it to your script library.  Don’t forget to rename the file paths to match your file locations.

<script src="/server/site/scripts/jquery.js" type="text/javascript" ></script>
<script src="/server/site/scripts/main.js" type="text/javascript"></script>
<style>
#screenshot{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
</style>

3:  Add the following xslt to your Core Search Results web part

After this section:

<xsl:choose>
<xsl:when test=”hithighlightedproperties/HHUrl[. != ”]”>
<xsl:call-template name=”HitHighlighting”>
<xsl:with-param name=”hh” select=”hithighlightedproperties/HHUrl” />
</xsl:call-template>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select=”url”/>
</xsl:otherwise>
</xsl:choose>


<!-- Add PDF Preview in frame link to Search Result -->

<xsl:if test="(contains($url,'.pdf'))">
<a href="{$url}" >
<img border="0" src="/_layouts/images/MAGNIFY.GIF" alt="" style="padding-right: 5px; padding-left: 5px; vertical-align:bottom" />
 </a>
</xsl:if>

</span>

So each Search Result, which is a PDF file, will display a small magnifying glass and when the user hovers their mouse over the image, the javascript opens a small iframe window, which displays the PDF file. So no images are being created, no conversion is actually occurring.

One down-side point, the user must have Adobe reader installed to view the PDF files.

Thanks for reading, any questions, please comment.

About these ads

October 23, 2012 - Posted by | SharePoint 2010 | ,

18 Comments »

  1. Great solution! Thank you for this tip.

    Comment by Benjamin | March 7, 2013 | Reply

  2. Thanks Benjamin, Glad you find it useful.

    Comment by Brett | March 8, 2013 | Reply

  3. can you name the .html file pdf.html? I put the html and main.js in the style library and change the pointer to the correct paths. Copy and pasted the data on the search page core webpart. Problem: I never the the mag icon when searching for PDF files.

    Comment by Bob Simmons | April 26, 2013 | Reply

  4. Hi Bob, thanks for trying out my solution.
    Make sure you place the HTML file into a Content Editor Web Part on the search results page.
    I’ve adjusted the formatting of the HTML code in Step 2, in case WordPress modified the ” and ‘ characters.
    Did you place the code correctly in the XSLT of the Core Results web part?

    Comment by Brett | April 26, 2013 | Reply

    • Thanks for the post. I got the same problem as Bob had. I made all changes. I have jquery 1.9.1.js, I even tried to put the html code in content editor web part instead of putting the link but still no result.

      Comment by John | April 9, 2014 | Reply

      • Can’t edit my comment! (User error!) There are two same section in core results web part. I got the magnifier, but it does not show thumbnail when I hover it.

        Comment by John | April 9, 2014

      • Hi John, it does sound like a jquery not loading problem. Do you get any errors in IE when you hover? A yellow exclamaition mark? did yoū edit main.js with the text from the word doc above?

        Comment by Brett | April 10, 2014

      • I don’t get any errors? I just see the url for the document when I hover mouse on magnifier, and when I click it takes me to pdf, but it does not preview document when I hover it. I updated main.js with the doc you have it above. Thanks

        Comment by John | April 22, 2014

      • John, what version of IE are you using? Check all paths pointing to each script file. Perhaps attempt my other blog post to get the PDF Preview in a document library to get a feel for how it works or to see if you’ve missed something?

        Comment by Brett | April 22, 2014

      • It is IE 9. I checked paths several time. I checked your other blog post, and it says “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.” Is it same in here too? I was going to try your other post, but downloading entire PDF is a deal-breaker. If it is, I tried that too! Anyway, thanks for trying to helping me.

        Comment by John | April 23, 2014

      • Correct John, this solution when you mouse-over the PDF actually downloads the full PDF file and displays the first page as a thumbnail in an iframe. It does work for IE9. Perhaps try using a different version of JQuery, eg: v1.62 should work. Also if there’s already JQuery being loaded on the page, it will conflict and not display, so just remove the line that has jquery.js.
        Also check the IE Developer Tools (F12) to see if there are any conflicts.

        Comment by Brett | April 23, 2014

  5. NICE (Y)

    Comment by nermin_667@hotmail.com | May 23, 2013 | Reply

  6. Is there away to apply this to a document library?

    Comment by Jewell | November 2, 2013 | Reply

  7. Thank you so much!

    Comment by Jewell | November 4, 2013 | Reply

  8. […] Display PDF Thumbnail Preview on Hover in Search Results Web Part […]

    Pingback by Add a PDF Thumbnail Hover Preview Column to a Document Library « SharePoint 2020 | November 4, 2013 | Reply

  9. Thanks for checking out the post. This solution with other file-types? no, as the JQuery file is edited for PDF files in an iframe.

    Comment by Brett | February 16, 2014 | Reply


Post a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: