Flickity.create is Undefined

[jonZlotnik]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.css">
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/flickity-fullscreen@2/fullscreen.css">
<script src="https://unpkg.com/flickity-fullscreen@2/fullscreen.js"></script>

<style>
  .carousel-cell {
      display: block;
  }

  /* .is-fullscreen added to carousel when fullscreen
  size cells to full height when fullscreen */
  .carousel.is-fullscreen .carousel-cell {
      height: 100%;
  }
</style>

<!-- Ranges through content/photos/*.md -->
{{ range .Pages }}
<div class="max-w-lg">
  <a href="{{.Permalink}}">
      <h2>{{.Title}}</h2>
  </a>
  <h5>{{.Date.Format "2006-01-02"}}</h5>
  <div class="carousel"
      data-flickity='{ "imagesLoaded": true, "percentPosition": false, "fullscreen": true }'>
      {{ $image := (.Page.Resources.ByType "image") }}
      {{ with $image }}
      {{ range . }}
      <img class="carousel-cell max-w-full w-auto h-auto m-auto" src="{{ .RelPermalink }}" />
      {{ end }}
      {{ end }}
  </div>

[graysonlee123]

I was getting this issue too. I got it to work by downgrading Flickity Fullscreen to the latest of version 1.

https://unpkg.com/flickity-fullscreen@1/fullscreen.css https://unpkg.com/flickity-fullscreen@1/fullscreen.js

[hubgoere]

I am also getting this error.

What's worse is that flickity-fullscreen-button doesn’t even appear.

Here’s a dummy page: http://tatjanapreuss.de/index.php/de/arbeiten/work-de-020

Reverting to Flickity fullscreen v1.1.1 as suggested by graysonlee123 removes the error message, but the button is still missing. Flickity itself is working fine. I’m on Joomla! 4 (which uses vanilla JavaScript) and initiated Flickity via HTML. Any ideas? I’ve been stuck on this problem for days.

[jonZlotnik]

I was getting this issue too. I got it to work by downgrading Flickity Fullscreen to the latest of version 1.

https://unpkg.com/flickity-fullscreen@1/fullscreen.css https://unpkg.com/flickity-fullscreen@1/fullscreen.js

Wow, that worked beautifully!!

[jonZlotnik]

I am also getting this error.

What's worse is that flickity-fullscreen-button doesn’t even appear.

Here’s a dummy page: http://tatjanapreuss.de/index.php/de/arbeiten/work-de-020

Reverting to Flickity fullscreen v1.1.1 as suggested by graysonlee123 removes the error message, but the button is still missing. Flickity itself is working fine. I’m on Joomla! 4 (which uses vanilla JavaScript) and initiated Flickity via HTML. Any ideas? I’ve been stuck on this problem for days.

Did you add the data-flickity='{"fullscreen": true}' to your carousel div tag as shown in my code snippet above?

[hubgoere]

Did you add the data-flickity='{"fullscreen": true}' to your carousel div tag as shown in my code snippet above?

Yes, I initialized Flickity in HTML, and all the other attributes work as expected. Only flickity-fullscreen doesn't.

<div class="myWrapper">
    <div class="main-carousel myFlickity" data-flickity='{ "cellAlign": "left", "contain": true, "freeScroll": true, "freeScrollFriction": 0.03, "prevNextButtons": false, "setGallerySize": false, "fullscreen": true }'>
        <div class="carousel-cell" id="myCell_01">
            <figure class="image">
                <img src="images/1.jpg" loading="lazy" width="123" height="456" alt="insert alt text" data-path="local-images:/1.jpg"/>
                <figcaption>insert caption</figcaption>
            </figure>
        </div>
        <div class="carousel-cell" id="myCell_02">
            <figure class="image">
                <img src="images/2.jpg" loading="lazy" width="789" height="123" alt="insert alt text" data-path="local-images:/2.jpg"/>
                <figcaption>insert caption</figcaption>
            </figure>
        </div>
        <div class="carousel-cell" id="myCell_03">
            <figure class="image">
                <img src="images/3.jpg" loading="lazy" width="456" height="789" alt="insert alt text" data-path="local-images:/3.jpg"/>
                <figcaption>insert caption</figcaption>
            </figure>
        </div>
    </div>
</div>

I inserted the code from fullscreen.js right under the flickity code itself in my user.js file. Does flickity-fullscreen only work if they are in separate files?

[hubgoere]

I finally managed to work around the problem by downgrading, too. For some reason, fullscreen.js v1.1.1 downloaded here from GitHub didn’t work on my site – but fullscreen.js v1.1.1 grabbed from this CodePen (file hosted on unpkg.com) did.

I didn’t really spend a lot of time comparing the files, so I don’t know what the difference is.

I now use this combo:

flickity.pkgd.js v2.3.0 – downloaded from GitHub fullscreen.js v1.1.1 – downloaded from aforementioned CodePen fullscreen.css v1.0.1 – downloaded from GitHub, with a little customization

[DoctorSubtilis]

I solved (even with the last release) with the correct order of js: before the generic flickity.js, and then the specific fullscreen.js:

<script src="../flickity.pkgd.min.js"></script>
<script src="../flickity-fullscreen.js"></script>

and not

<script src="../flickity-fullscreen.js"></script>  
<script src="../flickity.pkgd.min.js"></script>

EDIT
Maybe I'm wrong: I was using the old realease...

[talk-show-host]

I'll preface this by saying I'm not a professional dev by any means, but I'm working on a project and came across this error. As was said above, using an older version worked but the following also worked for me. Its sorta an amalgamation of v1.1.1 and v2.

Move line 30, (let proto = Flickity.prototype;) to above line 18. You could leave and use Flickity.prototype in place of proto below, but as they're referencing the same thing I prefered to move the line.

Then replace Flickity.create.fullscreen = function() { with: Flickity.createMethods.push('_fullscreen'); proto._fullscreen = function() {

I can't explain why it works, as I said above I'm not a professional, but it got rid of the undefined error, and allowed me to use the rest of the v2 file. At a quick glance, it appears to do the trick - the fullscreen button appears and Flickity goes fullscreen. But there might be ramifications to this change I'm not currently aware of

[aaronstezycki]

If you look at the repos commits, the current changes are there to work with V3 of the main flickity branch, which is as yet unreleased.

Use v1.1.1 for now if you are using ~v2.1.3 of Flickity.

[visualpropaganda]

Reverting to Flickity fullscreen v1.1.1 as suggested by graysonlee123 removes the error message, but the button is still missing. Flickity itself is working fine. I’m on Joomla! 4 (which uses vanilla JavaScript) and initiated Flickity via HTML. Any ideas? I’ve been stuck on this problem for days.

Did you manage to solve the button issue? I have the same problem. Using fullscreen v1.1.1 the error goes away, but the button does not show up.

I initialize everything with vanilla javascript.

[hubgoere]

Reverting to Flickity fullscreen v1.1.1 as suggested by graysonlee123 removes the error message, but the button is still missing. Flickity itself is working fine. I’m on Joomla! 4 (which uses vanilla JavaScript) and initiated Flickity via HTML. Any ideas? I’ve been stuck on this problem for days.

Did you manage to solve the button issue? I have the same problem. Using fullscreen v1.1.1 the error goes away, but the button does not show up.

Yes, as described in my comment on July 1st, 2022. It's still working, but I never found out why and I haven't looked into it since. There must be a minute but important difference between fullscreen.js v1.1.1 from GitHub and fullscreen.js v1.1.1 from CodePen, which I didn't find because I'm no dev. Try the one from CodePen. It worked for me.

I initialize everything with vanilla javascript.

I initialize with HTML. Don't know if it makes a difference to the issue.

[cornejobarraza]

I'll preface this by saying I'm not a professional dev by any means, but I'm working on a project and came across this error. As was said above, using an older version worked but the following also worked for me. Its sorta an amalgamation of v1.1.1 and v2.

Move line 30, (let proto = Flickity.prototype;) to above line 18. You could leave and use Flickity.prototype in place of proto below, but as they're referencing the same thing I prefered to move the line.

Then replace Flickity.create.fullscreen = function() { with: Flickity.createMethods.push('_fullscreen'); proto._fullscreen = function() {

I can't explain why it works, as I said above I'm not a professional, but it got rid of the undefined error, and allowed me to use the rest of the v2 file. At a quick glance, it appears to do the trick - the fullscreen button appears and Flickity goes fullscreen. But there might be ramifications to this change I'm not currently aware of

More than a year later your solution worked for me, thank you!

[Webmaster-Siag]

The answer is mutch simpler: fullscreen.js is made for Flickity v3 and not for Flickity v2 (see here).

Thus in your head you put this:

  <link rel="stylesheet" href="https://unpkg.com/flickity@3/dist/flickity.min.css">
  <link rel="stylesheet" href="https://unpkg.com/flickity-fullscreen@2/fullscreen.css">

In the body you put this:

  <script src="https://unpkg.com/flickity@3/dist/flickity.pkgd.min.js"></script>
  <script src="https://unpkg.com/flickity-fullscreen@2/fullscreen.js"></script>

The number after the @-char indicates the version B-)

Kind regards Alain