一个 fancybox 中的多个 clickeble pdf

Question

我知道如何通过我的按钮显示一个 pdf 文件。我想知道如何显示 pdf 列表，然后打开它们。

js

<script type="text/javascript">
  $(".fancypdf").click(function(){
  $.fancybox({
  type: 'html',
  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();
  }
  }); //fancybox
  return false;
  }); //click
</script>

html

<div class="b-fisiere"> 
          <a class="fancypdf" rel="pdfuri" href="pdf/dental_dk50_dk50_10_MD.pdf">       
            <div class="b-fisiere-stanga">
            <i class="fa fa-inbox fa-3x" aria-hidden="true"></i>
            </div>
            <div class="b-fisiere-dreapta">FISIERE</div>     
          </div>
          </a>

这是新手。谢谢！

Answer 1

要显示多个 pdf 文件，您需要改用 select 标签。对于每个选项，我添加了一个 data-url 属性来放置指向要显示的 pdf 的 url。

<select id="pdfList" class="form-control">
  <option value="pdf1" data-url="https://www.gnu.org/software/make/manual/make.pdf">#1</option>
  <option value="pdf2" data-url="http://cdn-10.nikon-cdn.com/pdf/manuals/noprint/D7000_ENnoprint.pdf">#2</option>
  <option value="pdf3" data-url="http://www.fujifilm.com/support/digital.../manuals/pdf/index/x/fujifilm_xe1_manual_en.pdf">#3</option>
</select>

最后但同样重要的是，绑定到 select 标签的更改事件。还记得我在上一段提到的 data-url 吗？从那里获取 url。

$("#pdfList").change(function(e) {
  var $selectList = $(this),
    $selectedItem = $selectList.find(':selected');

  e.preventDefault();

  $.fancybox({
    type: 'html',
    autoSize: false,
    content: '<embed src="' + $selectedItem.data('url') + '#nameddest=self&page=1&view=FitH,0&zoom=80,0,0" type="application/pdf" height="99%" width="100%" />',
    beforeClose: function() {
      $(".fancybox-inner").unwrap();
    }
  }); //fancybox

}); //change

请参考这个 plunker 示例以查看其工作情况：http://plnkr.co/edit/FTk556yDzdl9utncqhLa?p=preview

一个 fancybox 中的多个 clickeble pdf

Multiple clickeble pdfs in a fancybox

html

jquery

fancybox

fancybox-2

js

html