CODEWITHSUNDEEP
phpjqueryimagefancybox-3
Matthew Jendrasiak
Matthew Jendrasiak

Reputation: 103

FancyBox 3 Resizing to Window and Aspect Ratio

I am creating a website at http://www.duss.sc.edu/nasca/

If you check this on the date that I've posted this question or a couple days later (since I don't often update what's live), you can see my issue illustrated. Click on one of the eight cards on the left that is labeled "image", see information pop up on the right. Click on the larger image on the right and see the fancybox pop up over top of everything. The image will behave all wrong, though. Whatever image you select, it will usually be relatively high resolution so it will scale to be larger than the screen, but I want it to take the size of the window. It's aspect ratio is also consistently wrong, unless I select full screen. If I click the image so it will scale down, it takes the aspect ratio of the div container of the image, except the container is almost never the actual dimensions of the image. That's why I have the lightbox in the first place. So you can see the whole thing.

Here's how I've implemented fancybox:

index.js

//this function is called on page load (like .ready())
function init_index() {
  ...

  $().fancybox({
    selector: '[data-fancybox="Featured"]',
    protect: true,
    autoSize: false,
    autoScale: false,
    autoDimensions: false
  });

  ...
}

home-more.php

//this php file is loaded with some parameters to display the details on the right side
...
echo '  <div id="preview-media-container">';
echo '    <a class="fancybox-home" href="' . $ref_full . '" data-fancybox="Featured" data-type="image" data-caption="' . $trimmed . '" data-width="' . $dimensions['width'] . '" data-height="' . $dimensions['height'] . '">';
echo '      <img src="' . $ref_large . '" id="preview-media" />';
echo '    </a>';
echo '  </div>';
...

$dimensions['width'] and ['height'] get accurate pixel dimensions of the particular image being loaded. Take my word for it that I've tested it and it works.

I have been unable to find any fancybox 3 documentation on the arguments I can add to the .fancybox() object and what they each do, so that's complicated things. I've tried a handful of different combinations of arguments aside from what you see here.

Keep in mind the code I have here is local, latest code, and the live code is a bit different but the strange sizing behavior is similar on the live site. I have only given you the link to help illustrate the issue, not as a source to analyze the code.

I know that in my latest, local code, the fancybox instance is getting my arguments since the right click is disabled from my setting 'protect: true'.

Does anyone know what the problem is here?

Upvotes: 1

Views: 1251

Answers (1)

Janis
Janis

Reputation: 8769

Update jQuery to the latest or at least to v3.2.0

Upvotes: 2

Related Questions