Fancybox 尺寸错误答案

【问题标题】：Fancybox wrong dimensionFancybox 尺寸错误
【发布时间】：2016-03-02 17:42:01
【问题描述】：

我在 Codeigniter 视图中使用 Fancybox，但是当我单击锚点时，我得到了这个“奇怪”的维度：

我不明白为什么。我尝试多次更改 pdf 部分，更改高度、宽度、自动大小、自动尺寸，但每次都没有结果。代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      <link rel="stylesheet" src="http://fancyapps.com/fancybox/source/jquery.fancybox.css"></script>
      <link rel="stylesheet" src="<?php echo base_url('/Fancybox/source/helpers/jquery.fancybox-buttons.css'); ?>"></script>
      <script  type="text/javascript" src="<?php echo base_url('/Fancybox/source/jquery.fancybox.js'); ?>"></script>
      <script type="text/javascript" src="<?php echo base_url('/Fancybox/lib/jquery.mousewheel-3.0.6.pack.js'); ?>"></script>
    <script  type="text/javascript" src="<?php echo base_url('/Fancybox/source/helpers/jquery.fancybox-buttons.js'); ?>"></script>
     <script>
    /* <![CDATA[ */

    $(document).ready(function() {
      $('.imagen').click(function(e){
        e.preventDefault();
    parent.$.fancybox([
    {href:'images/01.jpg', title: '01'},
    {href:'images/02.jpg', title: '02'},
    {href:'images/03.jpg', title: '03'}
    ],{
    //      href: this.href,
          helpers: {
            overlay: {
            opacity: 0.3
            } // overlay
            //, buttons: {}
          } // helpers
        }); // fancybox
      }); // click
      $('.video').click(function(e){
        e.preventDefault();
        parent.$.fancybox({
          href: this.href,
          width: 560,
          height: 315,
          type: 'iframe',
          helpers: {
            overlay: {
            opacity: 0.3
            } // overlay
          } // helpers
        }); // fancybox
      }); // click
    $(".pdf").click(function(){
    parent.$.fancybox({
    type: 'html',
    width: 560,
     height: 315,
    autoSize: false,
    content: '<embed src="'+this.href+'#nameddest=self&page=1&view=FitH,0&zoom=80,0,0" type="application/pdf" height="99%" width="100%" />',
    beforeClose: function() {
    $(".fancybox-inner").unwrap();
    },
          helpers: {
            overlay: {
            opacity: 0.3
            } // overlay
          }
    }); //fancybox
    return false;
    }); //click 
    }); // ready
    /* ]]> */
    </script> 
    <script> 
    $(".fancypdf").click(function(){
     $.fancybox({
       'width':400,
       'height':1200,
       autoSize: false,
       content: '<embed src="'+this.href+'#nameddest=self&page=1&view=FitH,0&zoom=100,0,0" type="application/pdf" height="100%" width="100%" />',
       beforeClose: function() {
         $(".fancybox-inner").unwrap();
       }
     }); //fancybox
     return false;
    }); //click
    </script>

<a class="pdf" data-fancybox-type="iframe" rel="group" href="http://www.istruzioneformazionelavoro.it/Engine/RAServeFile.php/f/corsi/84/Tabella_corsi_allegatoDD311.pdf">prova</a>

更新：

这是带有您的代码的图像结果：

【问题讨论】：

标签： javascript jquery html codeigniter fancybox

【解决方案1】：

在 fancybox 中打开 PDF 文件就像在你的锚中设置特殊的 class data-fancybox-type="iframe" 一样简单：

<a class="pdf" data-fancybox-type="iframe" rel="group" href="http://www.istruzioneformazionelavoro.it/Engine/RAServeFile.php/f/corsi/84/Tabella_corsi_allegatoDD311.pdf">prova</a>

...然后使用普通的fancybox初始化脚本，例如：

jQuery(document).ready(function($) {
  $(".pdf").fancybox({
    // API options
  }); // fancybox
}); // ready

见JSFIDDLE

没有必要把事情过度复杂化；）

PS。是否使用 codeigniter 并不重要

【讨论】：