metafizzy/flickity-bg-lazyload

Flickity lazyload background images

flickity-bg-lazyload's Issues

Not compatible with flickity v2.2.0

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.

Scroll in front of Flickity (with bg-lazy-load) get lagging

Issue: http://recordit.co/BmEG7KrcoE

Current options:

    var options = {
      cellAlign: 'left',
      pageDots: false,
      contain: true,
      groupCells: true,
      bgLazyLoad: 1
    };

When disable bglazyload and using default Flickity, it works normally.

Settings: 5 items shown, 30 items in a single carousel.

Include flickity-bg-lazyload and flickity-fade in CDNJS

I'd like the ability to include all the Flickity packages from CDNJS.
Any chance this can happen?
Looks like some basic info is missing from the repos in order to accomplish this - namely a license:

Will bgLazyLoad reposition cells when their background images are loaded like imagesLoaded?

This comment makes it seem like it should, but it still seems like I'm still having issues with the height of the flickity-viewport when using bgLazyLoad:

This is random and seems to mostly happen in Safari (even more often when caching is disabled).

Incorrect documentation

The README for browserify in this repo says:

var Flickity = require('flickity-flickity-bg-lazyload');

when it should be:

var Flickity = require('flickity-bg-lazyload');

builtin loading animation svg

Is there any builtin loading animation svg for this?

Not compatible with Flickity v1

Hi Desandro,
i was not able to run the bg lazyload with flickity!

After switching event select to cellSelect

// Flickity background lazyload v1.0.0

proto._createBgLazyLoad = function() {
  //this.on('select', this.bgLazyLoad); // does not work for me
  this.on('cellSelect', this.bgLazyLoad);
};

the code works as expected!

Can you confirm, that i am using the code right?

BTW: Will this feature be part of flickity 2.x and when will you release the upcomming version?

Thanks for the great library pieces.

Regards Holger

Use tag "picture"

How can I use the "picture" tag? I want to use different images depending on the size of the screen.

Uncaught TypeError: Cannot read property 'createMethods' of undefined

Dave:

Getting a weird error here, thought you might have some insights. Whenever I include the flickity-bg-lazyload package via Bower, I get this error in the console:
Uncaught TypeError: Cannot read property 'createMethods' of undefined

Thumbed through a lot of documentation and found a similar type of issue in the Masonry repo:
desandro/masonry#618

Interestingly, the comment towards the bottom [https://github.com/desandro/masonry/issues/618#issuecomment-136295697] deals with a similar stack to what I'm building on: WordPress with the Roots / Sage ecosystem. I tried her workaround with no avail.

Here is my bower.json file:

{
  "name": "sage",
  "homepage": "https://roots.io/sage/",
  "authors": [
    "Ben Word <[email protected]>"
  ],
  "license": "MIT",
  "private": true,
  "dependencies": {
    "bootstrap-sass": "3.3.6",
    "flickity": "^2.0.0",
    "flickity-bg-lazyload": "^1.0.0",
    "jquery.lazyload": "^1.9.7",
    "waypoints": "^4.0.1"
  },
  "overrides": {
    "flickity-bg-lazyload": {
      "main": ["./dist/scripts/flickity-bg-lazyload.js"]
    },
    "bootstrap-sass": {
      "main": [
        "./assets/stylesheets/_bootstrap.scss",
        "./assets/javascripts/bootstrap/transition.js",
        "./assets/javascripts/bootstrap/button.js",
        "./assets/javascripts/bootstrap/collapse.js",
        "./assets/javascripts/bootstrap/modal.js",
        "./assets/javascripts/bootstrap/tab.js"
      ]
    }
  }
}

Also, this is how my scripts load on the page, which seems ok to me:

<script type="text/javascript" src="//localhost:3000/wp-includes/js/jquery/suggest.min.js?ver=1.1-20110113"></script>
<script type="text/javascript" src="//localhost:3000/wp-content/themes/aa-theme/dist/scripts/flickity.js"></script>
<script type="text/javascript" src="//localhost:3000/wp-content/themes/aa-theme/dist/scripts/flickity-bg-lazyload.js"></script>
<script type="text/javascript" src="//localhost:3000/wp-content/themes/aa-theme/dist/scripts/clamp.js"></script>
<script type="text/javascript" src="//localhost:3000/wp-content/themes/aa-theme/dist/scripts/jquery-lazyload.js"></script>
<script type="text/javascript" src="//localhost:3000/wp-content/themes/aa-theme/dist/scripts/waypoints.js"></script>
<script type="text/javascript" src="//localhost:3000/wp-content/themes/aa-theme/dist/scripts/main.js"></script>

Let me know if you have any insight on this one, thanks in advance.