Comment afficher un document Word en utilisant fancybox.

Code HTML

 

Jquery code

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

il affiche le contenu demandé ne peut pas être chargé. Veuillez réessayer plus tard …. Et je reçois un téléchargement de ce fichier de document … Comment puis-je afficher le fichier de document à l’aide de fancybox

Tu ne peux pas. Les navigateurs ne disposent d’aucun moyen intégré pour afficher les documents Word. Par conséquent, à moins que l’utilisateur n’ait configuré son navigateur pour l’ouvrir avec un plugin (ce que 99% du monde n’a pas encore fait), le navigateur l’invite à télécharger le fichier. .

MISE À JOUR: 29 janvier 2017

Google Docs Viewer permet de voir le document Word comme un document (en lecture seule) et non comme une image (comme il fonctionnait auparavant). Vous pouvez donc sélectionner et copier le document affiché dans un autre document.

Ajout d’un JSFIDDLE à l’ aide de Fancybox v2.1.5


Le seul moyen possible de le faire sans tous les problèmes mentionnés ci-dessus consiste à utiliser Google Document Viewer pour afficher l’image du fichier via iframe … pour que ce script:

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

avec ce html:

 open a word document in fancybox 

… devrait faire l’affaire.

Notez simplement que vous n’ouvrez pas un document Word, mais une image de celui-ci, ce qui fonctionnera si vous souhaitez uniquement afficher le contenu du document.

BTW, j’ai remarqué que vous devez utiliser fancybox v2.x. Dans ce cas, vous n’avez pas du tout besoin de la méthode .live() car fancyBox v2 utilise déjà “live” pour gérer les clics.

Autant que je sache, vous aurez besoin d’une sorte de plug-in qui saura gérer ce type MIME. Sinon, ce n’est pas possible.

Même chose pour tout type de fichier …

Vous pouvez utiliser ce code, court et doux (avec la dernière version de Fancybox) –

 $.fancybox.open({ padding: 0, href: $url, type: 'iframe', }); 

Où votre $ url peut être quelque chose comme –

 https://docs.google.com/viewer?url=&embedded=true