How to display a word document using fancybox

Question

HTML code

<div class='case'>
    <a href="http://localhost/DXXX/case/reqirement.doc" rel="case"> view</a>
</div>

Jquery code

$(".case").live('click', function(){
    $.fancybox({
        openEffect: 'elastic',
        closeEffect: 'elastic'
    });
});

it's displays the requested content cannot be loaded please try again later.... And I get a download of that document file... How can I display the document file using fancybox

Answer 1

UPDATE: Jan 29, 2017

Google Docs Viewer allows the Word document to be seen as a (read-only) document rather than an image (as it was previously working), so you can actually select and copy from the displayed document into another document.

Added a JSFIDDLE using Fancybox v2.1.5

---

The only possible way to do it without all the issues mentioned above is to use Google docs viewer to display the image of the file via iframe ...so this script:

$(document).ready(function() {
 $(".word").fancybox({
  'width': 600, // or whatever
  'height': 320,
  'type': 'iframe'
 });
}); //  ready 

with this html:

<a class="word" href="http://docs.google.com/gview?url=http://domain.com/path/docFile.doc&embedded=true">open a word document in fancybox</a>

... should do the trick.

Just notice that you are not actually opening a Word document but an image of it, which will work if what you want is to show the content of the document only.

BTW, I noticed that you must be using fancybox v2.x. In that case you don't need the .live() method at all since fancyBox v2 already uses "live" to handle clicks.

Answer 2

You can't. Browsers don't have any built-in way to view Word docs so unless the user has configured their browser to open it with some plugin (which 99% of the world hasn't done), the browser will prompt them to download the file.