Preview With Powertips.js

Preview With Howercard.js

Download Powertips script file Download Hovercard.js Script File
Put into Sharepoint 2013 document liberary... Put into Sharepoint 2013 document liberary...
Go to Edit Page. Put webpart Content Editor Go to Edit Page. Put webpart Content Editor
Go to Format Text & edit html source after putting Content Editor Webpart Go to Format Text & edit html source after putting Content Editor Webpart
Put Script Path, Put CSS path as per show below. Put Script Path, Put CSS path as per show below.
 
<script type="text/javascript">
        
        $(function () {

        $('a').hover(function () {

        var tooltip = $(this).attr("href");
            
            $('#mouseon-examples a').data('powertipjq', $([
                
                '<p><div class><object data=' + tooltip + ' type="application/pdf" width="320" height="295" style="overflow:hidden;"></object></div></p>'].join('\n')));
            $('#mouseon-examples a').powerTip({
               placement: 'e',
               smartPlacement: true,
               mouseOnToPopup: true,
               closeDelay: 8000
                
            });
           
           });
       });
    </script>
<script src="SiteAssets/jQuery v1.7.1.js" type="text/javascript"></script>
<script src="SiteAssets/hovercard.js" type="text/javascript"></script>


.padded
{
    padding:15px 10px;
    border:solid 2px #eee;
    background:#333;
}

.hoverme {
 cursor:pointer;   
}

</style>
<script type="text/javascript">
    $(document).ready(function (){
    
    $('.hoverme').hover(function (){
    var file = $(this).attr("href");
        


    var pdfDiv =
    '<div class="padded">' +
    '<object data="'+file+'" type="application/pdf" width="400"

height="400"></object>' +
    '</div>';

        $('.hoverme').hovercard({
            detailsHTML: pdfDiv,
            width: 430
        });
    });
});

</script>
Now Add Calcualted Coloumn just like below : change value as per your need Now Add Calcualted Coloumn just like below : change value as per your need
="<div id='mouseon-examples'><a href='/Shared%20Documents/"&Title&"'><img src='/SiteAssets/Preview.png' width='24px' height='24px'></img></a></div>" ="<div><a class='hoverme' href='/Shared%20Documents/"&Title&"'><img src='/SiteAssets/Preview.png' width='24px' height='24px'></img></a>
</div>"

 

Last edited Mar 13, 2014 at 7:52 AM by amitpanchall, version 9