fancybox 条件宽度取决于它的“类型”

Posted 2023-05-09

【中文标题】fancybox 条件宽度取决于它的“类型”

【英文标题】：fancybox conditional width depends on its "Type"

【发布时间】：2018-02-03 05:20:41

【问题描述】：

我正在显示 图像 和 pdfs 使用相同的 fancybox 初始化，创建并初始化为：

<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 大小。

我想用width='90%'打开images作为原始尺寸和pdf。 如何做到这一点？

我使用的是 fancybox 2.1.5 版本。

【参考方案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,
);