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.

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