fancybox conditional width depends on its "Type"

Question

I'm showing images and pdfs using same fancybox initialization, created and initialized as :

<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,
});

Without type='iframe' images opens with original size, but it does not work for pdf.
With type='iframe' to show pdf, then images open in iframe but with extended iframe size.

I want to open images as original size and pdf with width='90%'. How to do this ?

I'm using fancybox 2.1.5 version.

Shantaram Tupe Shantaram Tupe · Accepted Answer · 2017-09-15T07:43:09

I have solved this by following changes :

<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>

I have decided type of fancybox at element itself using a condition as ::

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

since I'm using jsp i used EL Expression to check it.

And Here is my Fancybox configuration ::

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

fancybox conditional width depends on its "Type"

1 Answers