v5 breaking changes

[dmitrue]

Hi there,

How to reproduce carousel + thumbnails in v5+ (as it worked perfectly in v4)? All the previous docs and guides have been removed https://fancyapps.com/docs/ui/fancybox/. And findPageForSlide doesn't seem to work any more.

Particularly this part:

Combine with Carousel​

To sync Fancybox with Carousel, follow two simple steps:

1. Create a carousel with elements that have the data-fancybox attribute (alternatively, use Fancybox.bind()).
2. Use Carousel.change event to detect changes of the gallery item, and set the carousel position to the corresponding page. Example (full demo):

  Carousel: {
    on: {
      change: (that) => {
        // Sync Carousel slide
        mainCarousel.slideTo(mainCarousel.findPageForSlide(that.page), {
          friction: 0,
        });
      },
    },
  },
});
Copy
You can also display multiple items on each slide, [demo](https://fancyapps.com/playground/1ZP).

[fancyapps]

Hi,

You do not need to do anything for the integration, they will be synced automatically, no extra code is needed.

Example: https://stackblitz.com/edit/js-vk4rms?file=index.js

[dmitrue]

Hi,

Thanks for reply. I'm using Stimulus JS with Rails, how to properly import Thumbs module? I have import { Fancybox, Carousel, Panzoom } from "@fancyapps/ui" which works fine, however import { Thumbs } from '@fancyapps/ui/dist/carousel/carousel.thumbs.esm.js' gives the following error:

Could not find a declaration file for module '@fancyapps/ui/dist/carousel/carousel.thumbs.esm.js'. 'node_modules/@fancyapps/ui/dist/carousel/carousel.thumbs.esm.js' implicitly has an 'any' type. If the '@fancyapps/ui' package actually exposes this module, try adding a new declaration (.d.ts) file containing declare module '@fancyapps/ui/dist/carousel/carousel.thumbs.esm.js'

[fancyapps]

Hi, I think this is caused by entries in package.json. I have made some changes, could you, please, try to upgrade to the latest version and check if the problem persists?

[dmitrue]

Problem with import Thumbs resolved, thank you! 🙌🏻 But since I prefer classic mode thumbs I ended up creating two carousels and syncing them together.

Another issue I've noticed since v4 is that if I set image width to 100% and also set specific height (I want all the images in carousel to be the same width and height), when I click on the first image it doesn't show up (opacity property set to 0). A the same time on mobile breakpoint carousel works as intended.

[fancyapps]

Could you, please, share a link to your page or some demo where that issue could be inspected? Because I can not reproduce this. Also, are you sure you are using the latest (currently v5.0.4)?

[dmitrue]

Please use this link https://stackblitz.com/edit/js-7fuzjd?file=style.css, but open preview in full desktop tab. Basically I've changed two properties in your example: #myCarousel { width: 100%; } and .f-carousel__slide img { height: 450px; }

[fancyapps]

Thanks, I will look into this

[fancyapps]

It should be fixed in v5.0.5. Thanks for reporting!

[dmitrue]

Fixed indeed, thank you! 👍🏻