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>
border:1px solid #ccc;

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

After this section:

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

<!-- 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" />


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.


18 thoughts on “Display PDF Thumbnail Preview on Hover in Search Results Web Part

  1. Brett February 16, 2014 / 8:35 pm

    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.

  2. Jewell November 4, 2013 / 9:19 am

    Thank you so much!

  3. Jewell November 2, 2013 / 1:00 am

    Is there away to apply this to a document library?

  4. nermin_667@hotmail.com May 23, 2013 / 4:37 pm

    NICE (Y)

  5. Brett April 26, 2013 / 4:59 pm

    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?

    • John April 9, 2014 / 1:36 am

      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.

      • John April 9, 2014 / 2:09 am

        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.

      • Brett April 10, 2014 / 6:18 pm

        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?

      • John April 22, 2014 / 5:18 am

        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

      • Brett April 22, 2014 / 9:49 am

        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?

      • John April 23, 2014 / 2:38 am

        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.

      • Brett April 23, 2014 / 8:52 pm

        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.

  6. Bob Simmons April 26, 2013 / 1:34 pm

    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.

  7. Brett March 8, 2013 / 8:11 am

    Thanks Benjamin, Glad you find it useful.

  8. Benjamin March 7, 2013 / 5:59 pm

    Great solution! Thank you for this tip.

Post a Comment

Please log in using one of these methods to post your comment:

WordPress.com Logo

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

Google photo

You are commenting using your Google 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 )

Connecting to %s