Search code examples
javascriptfancyboxfancybox-3

Fancybox doesn't fit image when open

When I trying to open image it doesn't fit to scale. I even tried to use example, presented on the official site. It doesnt work on a local pages, but works on jsfiddle and similar sites (with the same html/css).

Here's an example of code and some animation of how it works on a local server (ZF3 skeleton app used). There's just bootstrap 4 (it works the same w/o bootstrap) style for image grid like on official site:

.image_grid {
  padding-left: 15px;
  padding-right: 15px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  a {
    padding: 5px;
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 33.33%;
    -ms-flex: 1 0 33.33%;
    flex: 1 0 33.33%;
    img {
      width: 100%;
      max-height: auto;
    }
  }
}

enter image description here

Solution

  • Upgrade jQuery to the latest, at least v3.2.0