Callout custom for Documet Library in SP2103

Question

How to implement a custom call out in SP2013 ? I have custom WebPart to display all doc libraries and display all docs in doc preview .

I used code below but I see the entire page but I want only the document to be previewed . Am I missing something here :

http://community.obilogic.co.uk/blogs/teamblog/archive/2014/01/23/sharepoint-2013-custom-callout-with-file-preview.aspx

<script src="/_layouts/15/mquery.js"  type="text/javascript"></script><script src="/_layouts/15/callout.js" type="text/javascript"></script><script type="text/javascript">


function getCallOutFilePreviewBodyContent(urlWOPIFrameSrc, pxWidth, pxHeight) {
var callOutContenBodySection = '<div class="js-callout-bodySection">';
callOutContenBodySection += '<div class="js-filePreview-containingElement">';
callOutContenBodySection += '<div class="js-frame-wrapper" style="line-height: 0">';
callOutContenBodySection += '<iframe style="width: ' + pxWidth + 'px; height: ' + pxHeight + 'px;" src="' + urlWOPIFrameSrc + '&amp;action=interactivepreview&amp;wdSmallView=1" frameborder="0"></iframe>';
callOutContenBodySection += '</div></div></div>';

return callOutContenBodySection;
}


function OpenItemFilePreviewCallOut(sender, strTitle, urlWopiFileUrl) {
RemoveAllItemCallouts();
var openNewWindow = true; //set this to false to open in current window
var callOutContenBodySection = getCallOutFilePreviewBodyContent(urlWopiFileUrl, 379, 252);
var c = CalloutManager.getFromLaunchPointIfExists(sender);
if (c == null) {
    c = CalloutManager.createNewIfNecessary({
        ID: 'CalloutId_' + sender.id,
        launchPoint: sender,
        beakOrientation: 'leftRight',
        title: strTitle,
        content: callOutContenBodySection,
        contentWidth: 420
    });

    var customAction = new CalloutActionOptions();
    customAction.text = 'Open';
    customAction.onClickCallback = function (event, action) {
        if (openNewWindow) {
            window.open(urlItemUrl);
            RemoveItemCallout(sender);
        } else {
            window.location.href = urlItemUrl;
        }
    };

    var _newCustomAction = new CalloutAction(customAction);
    c.addAction(_newCustomAction);
}

c.open();
}
function RemoveAllItemCallouts() {
CalloutManager.forEach(function(callout) {
    // remove the current callout
    CalloutManager.remove(callout);
});
}

function RemoveItemCallout(sender) {
var callout = CalloutManager.getFromLaunchPointIfExists(sender);
if (callout != null) {
    // remove
    CalloutManager.remove(callout);
}
} 


function CloseItemCallout(sender) {
var callout = CalloutManager.getFromLaunchPointIfExists(sender);
if (callout != null) {
    // close
    callout.close();
}
}

</script><a title="CallOut With File Preview" id="CallOutExample" onclick="OpenItemFilePreviewCallOut(this, &#39;My Title&#39;,&#39;&lt;http://vm:12/sites/cpd/_layouts/15/WopiFrame2.aspx?sourcedoc=/sites/cpd/SiteCollectionDoucuments/New%20Text%20Documents.txt&gt;&#39;)" ref="#"> Call Out with File Preview</a><a title="CallOut With File Preview" id="CallOutExample" onclick="OpenItemFilePreviewCallOut(this, &#39;My Title&#39;,&#39;http://vm:12:30387/sites/cpd/_layouts/15/WopiFrame2.aspx?sourcedoc=/sites/cpd/SiteCollectionDocuments/New%20Text%20Document.txt&amp;action=interactivepreview&amp;wdSmallView=1&#39;)" href="javascript:void(0)">Preview</a>

Answer 1

There is a small change in this statement:

callOutContenBodySection += '<iframe style="width: ' + pxWidth + 'px; height: ' + pxHeight + 'px;" src="' + urlWOPIFrameSrc + '&amp;action=interactivepreview&amp;wdSmallView=1" frameborder="0"></iframe>';

Replace the above statement with the below statement.

callOutContenBodySection += '<iframe style="width: ' + pxWidth + 'px; height: ' + pxHeight + 'px;" src="' + urlWOPIFrameSrc + '?action=interactivepreview&wdSmallView=1" frameborder="0"></iframe>';

Hope this will resolve your problem.