fancybox 条件宽度取决于其 "Type"

Question

我正在展示 images 和 pdfs 使用相同的 fancybox initialization，创建并初始化如：

<a class="fancybox" href="/path/to/imageORpdf" data-fancybox-group="gallery" title="Step : ${status.count }">
    Step : ${status.count }
</a>

$('.fancybox').fancybox({
  'width': '90%',
  'height': '100%',
  'transitionIn': 'elastic',
  'transitionOut': 'elastic',
   type: 'iframe',
   cyclic:   true,
});

没有 type='iframe' 图片以原始尺寸打开，但不适用于 pdf。
使用 type='iframe' 显示 pdf，然后图像在 iframe 中打开，但具有扩展的 iframe 大小。

我想以原始大小打开 images 并使用 width='90%' 打开 pdf。如何做到这一点？

我使用的是fancybox 2.1.5版本。

Answer 1

我已经通过以下更改解决了这个问题：

<a class="fancybox" href="/path/to/imageORpdf"  data-fancybox-group="gallery"  title="Step : ${stepStatus.count }"
        ${ ( fn:split(uploadedFiles[stepStatus.index],'.')[1] ) eq 'pdf' ? 'data-fancybox-type=iframe' : '' }
        >
        Step : ${stepStatus.count }
</a>

我已经使用条件 ::

决定了元素本身的 fancybox 类型

${ ( fn:split(uploadedFiles[stepStatus.index],'.')[1] ) eq 'pdf' ? 'data-fancybox-type=iframe' : '' }

因为我正在使用 jsp 我使用 EL 表达式来检查它。

这是我的 Fancybox 配置 ::

$('.fancybox').fancybox({
    'width' : '90%',
    'height' : '100%',
    'autoSize' : false,
    fitToView: false,
    'transitionIn' : 'elastic',
    'transitionOut' : 'elastic',
    cyclic    :   true,
});

fancybox 条件宽度取决于其 "Type"

fancybox conditional width depends on its "Type"

css

iframe

jquery

fancybox-2