Question

我在Codeigniter视图中使用Fancybox，但是当我点击锚点时，我得到了这个＆＃34;奇怪的＆＃34;尺寸：

我不明白为什么。我尝试多次更改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>

更新

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

Answer 1

在fancybox中打开PDF文件就像在你的锚中设置特殊的类 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无关紧要

Fancybox错误的维度

1 个答案: