search

metafizzy / flickity-bg-lazyload

Flickity lazyload background images
31 stars 4 forks source link

Not compatible with flickity v2.2.0 #11

Closed rzschoch closed 5 years ago

rzschoch commented 5 years ago

Unfortunately, the plugin stopped working after updating flickity to v2.2.0. The background image is not set in the style attribute of the active cell.

desandro commented 5 years ago

Thanks for reporting this issue. I was not able to reproduce this issue with v2.2.0. See demo https://codepen.io/desandro/pen/jAGAEb

rzschoch commented 5 years ago

Thanks for your reply! Fortunately, your demo extended with my options reproduces my issue: https://codepen.io/rzschoch/pen/qgoewB

desandro commented 5 years ago

Looks like setGallerySize: false was collapsing the carousel. If you remove this, the carousel appears. If you set setGallerySize: false, you should set a size for the carousel in CSS. See setGallerySize docs

rzschoch commented 5 years ago

My pen does not reflect my implementation at this point. Sorry about that.

I think the real issue appears after removing the setGallerySize option, which results in blank carousel cells, see here: https://codepen.io/rzschoch/pen/qgoewB

Thank you for supporting me!

desandro commented 5 years ago

Thanks for that. I'm seeing background images load in — albeit slowly, likely due to the unsplash.it responses. Can you double-check that the CDN url is loading to the latest v2.2.0 version? You might need to do a hard-refresh for this URL: https://npmcdn.com/flickity@2/dist/flickity.pkgd.js

rzschoch commented 5 years ago

You are right, this also was not my issue I tried to reproduce. It seems, I’m not able to create a pen that has it.

Unfortunately, in my real world project the old Flickity (2.1.2) works and the new doesn’t: https://renezschoch.de/projects/jennypilz (Flickity v2.2.0, does not work) https://www.jennypilz.de (Flickity v2.1.2, works)

Any idea would be greatly appreciated.

Thank you!

desandro commented 5 years ago

Looks like https://renezschoch.de/projects/jennypilz/assets/main.js uses Flickity v2.1.2.

rzschoch commented 5 years ago

Yes, both projects are identically and only differ in the version of flickity being used: https://renezschoch.de/projects/jennypilz (Flickity v2.2.0, does not work) https://www.jennypilz.de (Flickity v2.1.2, works)

Do you have any idea, what could be the reason for the non-working flickity 2.2.0 version?

desandro commented 5 years ago

I'm saying, if you load https://renezschoch.de/projects/jennypilz/assets/main.js, the Flickity version reads v2.1.2

screen shot 2019-02-19 at 8 39 23 pm

rzschoch commented 5 years ago

Oh, thanks for that and your patience.

I trusted my package.json and didn’t have a look at the build file. Now, I’m recognizing two flickity versions in it, one from flickity-hash, the other from flickity-bg-lazyload (both import flickity v2.1.2). Currently, my project depends on these two flickity features.

My package.json lists flickity, flickity-bg-lazyload and flickity-hash in its dependencies. Is there a recommended way for using flickity with its hash and bg-lazyload features? Or is it not possible right now? How can I import flickity for using both features at the same time (I tried import 'flickity-bg-lazyload'; import Flickity from 'flickity-hash';)? And lastly, how can I use both with the latest flickity version?

desandro commented 5 years ago

Yeah, loading multiple add-on features for Flickity isn't well tested. You should be able to import the two features. They should both point to and add-on to the same version of Flickity (hopefully)

import 'flickity-hash';
import Flickity from 'flickity-bg-lazyload';

There's a chance this doesn't work. let me know.

rzschoch commented 5 years ago

Thanks, I think my issues were related to the multiple flickity imports (bg-lazyload, flickity-hash and flickity itself). It now works by only importing the features (hash and bg-lazyload).