Any plans to support the flickity-fullscreen option?

[uxPete]

Thanks a lot for making this.

Any plans to support the flickity-fullscreen option?
https://github.com/metafizzy/flickity-fullscreen#install

or any pointers how to go about adding it? Cheers!

[drewjbartlett]

@uxPete -- I'm pretty sure you can just include that library in your build and pass the option fullscreen: true to your component and that'd do it!

Let me know if that works for you! :)

[uxPete]

Hi @drewjbartlett yes! it does indeed work by simply including the fullscreen js, and passing in the option fullscreen: true to the flickity config. 👍

import Vue from 'vue'
import Flickity from 'vue-flickity'
import 'flickity-fullscreen'

Vue.component('flickity', Flickity)

I ran into an issue with the fullscreen layout within my nuxt project, but nothing to do with vue-flickity.

Turns out that using CSS transforms for positioning means any child element with a position: fixed (which the fullscreen gallery mode uses) will use the transformed parent element for its fixed position.

I got around that by temporarily turning off the page transition transforms when the full-screen gallery is in use. It may help someone with the same issue…

.is-flickity-fullscreen .page-content {
  transform:none;
  transition:none;
}

Thanks again!

[mortensassi]

@uxPete Followed your steps but i had no luck. Nothing happens, loaded also the css but i can't get it to work with vue 2.6.2, vue-flickity 1.1.2 and flickity-fullscreen 1.1.1

[GrazianoMarco]

@mortensassi Have you found a solution for this? I have the same problem

[tomphilpotts]

Hi @drewjbartlett yes! it does indeed work by simply including the fullscreen js, and passing in the option fullscreen: true to the flickity config. 👍

import Vue from 'vue'
import Flickity from 'vue-flickity'
import 'flickity-fullscreen'

Vue.component('flickity', Flickity)

I ran into an issue with the fullscreen layout within my nuxt project, but nothing to do with vue-flickity.

Turns out that using CSS transforms for positioning means any child element with a position: fixed (which the fullscreen gallery mode uses) will use the transformed parent element for its fixed position.

I got around that by temporarily turning off the page transition transforms when the full-screen gallery is in use. It may help someone with the same issue…

.is-flickity-fullscreen .page-content {
  transform:none;
  transition:none;
}

Thanks again!

At first this was not working for me. But it is because the .flickity-fullscreen-button-view and
.flickity-fullscreen-button-exit didn't have any styles.

But after some work with the css this worked for me.

This is a bit late to reply, hopefully it helps someone else.

import Flickity from 'vue-flickity'; import 'flickity-fullscreen';

flickityOptions: { fullscreen: true}

Basic css:

.flickity-fullscreen-button-view{
    position: absolute
    width: 1rem
    height: 1rem
    background: #FFEB3B !important
    z-index: 999999
    top: 0
    left: 0}


.flickity-fullscreen-button-exit{
    position: absolute
    width: 1rem
    height: 1rem
    background: #24ff9c !important
    z-index: 999999
    top: 0
    right: 0}

[hedihadi]

can someone please drop their working versions? i'm using
"vue-flickity": "^1.1.2"
"flickity": "^2.2.1"
"flickity-fullscreen": "^1.1.1"

i've tried many combination but none of them work, each one has some specific problem.