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

时间:2017-08-25 07:46:02

标签: jquery css iframe fancybox-2

我使用相同的 fancybox初始化显示图片 pdfs ,创建并初始化为:

<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'张图片以原始尺寸打开,但它不适用于pdftype='iframe'显示 pdf 的情况下,图片会在iframe中打开,但扩展的 iframe 尺寸。

我想打开图片作为原始尺寸, pdf 打开width='90%'。 怎么做?

我正在使用fancybox 2.1.5版本。

1 个答案:

答案 0 :(得分:0)

我通过以下更改解决了这个问题:

<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 Expression来检查它。

这是我的Fancybox配置::

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