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 | ,

14 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

  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: