Implementation with images about vue-flickity HOT 8 CLOSED

This library fixed the issue for me: https://github.com/David-Desmaisons/Vue.ImagesLoaded

from vue-flickity.

@pjhartin

import the package:

import imagesLoaded from 'vue-images-loaded'

add the directive:

directives: { imagesLoaded }

then on your flickity component:

<flickity ref="flickity" :options="flickityOptions" v-images-loaded="imgsLoaded">
    <img :src="image.image" alt="" v-for="(image, index) in images" :key="index">
</flickity>

v-images-loaded triggers the method imgsLoaded

which can turn the opacity from 0 to 1 for each image ... at once or all together depending on how you configure the directive.

from vue-flickity.

I'm not sure this is the right place to ask this. But would you mind sharing some code and I'll have a look to see if I can be of any help? :)

from vue-flickity.

Perhaps, but a common use case for Flickity is with images and I can't find an example of that here -- so it may be appropriate.

The issue is described in this example http://flickity.metafizzy.co/options.html#imagesloaded and here: http://codepen.io/desandro/pen/MYQWEe

I have an array of images I want to share with the component but it doesn't render correctly sometimes because Flickity fires before the images are loaded. How have you been able render images successfully with this component? Or maybe I need to pull in imagesLoaded too

from vue-flickity.

@rugor I had the same issue, but luckily in my case all the images were the same size, so I gave fixed dimensions to their containers with CSS - That way, Flickity doesn't have to wait for the images to be fully loaded for correctly rendering the items

from vue-flickity.

@davekiss - When you say it fixed it, how did it fix it, what did you hook into when the image was processed?

from vue-flickity.

@rugor

Thanks mate for the clarification. I actually was wondering about the issue where images are dynamically added but it causes a problem where Flickity wouldn't resize properly: https://flickity.metafizzy.co/options.html#imagesloaded

I got it in the end by adding a reference to Flickity and calling the reloadCells function.

imgsLoaded(instance, image) {
      // Reload flickity cells due to height change post
      let flickityInstance = this.$refs.flickity;
      flickityInstance.reloadCells();
    }

from vue-flickity.

from vue-flickity.