├── .gitignore ├── README.md ├── bower.json ├── flickity-imagesloaded.js ├── package.json └── test ├── .jshintrc ├── helpers.js ├── index.html ├── tests.css └── unit ├── images-in-divs-in-divs.js ├── images-in-divs.js └── images.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | bower_components/ 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Flickity imagesLoaded 2 | 3 | Enables the `imagesLoaded` option for [Flickity](http://flickity.metafizzy.co) 4 | 5 | ``` js 6 | var flkty = new Flickity( '.carousel', { 7 | // re-position cells when images load 8 | imagesLoaded: true 9 | }) 10 | ``` 11 | 12 | ## Install 13 | 14 | This package is already included in `flickity.pkgd.js` and `flickity.pkgd.min.js`. You do not need to install this package if you are using those files. 15 | 16 | Bower: `bower install flickity-imagesloaded` 17 | 18 | npm: `npm install flickity-imagesloaded` 19 | 20 | ### RequireJS 21 | 22 | ``` js 23 | requirejs( [ 'path/to/flickity-imagesloaded' ], function( Flickity ) { 24 | var flkty = new Flickity( '.carousel', { 25 | imagesLoaded: true 26 | }); 27 | }); 28 | ``` 29 | 30 | ### Browserify 31 | 32 | ``` js 33 | var Flickity = require('flickity-imagesloaded'); 34 | 35 | var flkty = new Flickity( '.carousel', { 36 | imagesLoaded: true 37 | }); 38 | ``` 39 | 40 | --- 41 | 42 | By [Metafizzy](http://metafizzy.co) 43 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "flickity-imagesloaded", 3 | "main": "flickity-imagesloaded.js", 4 | "dependencies": { 5 | "flickity": "^2.0.0", 6 | "imagesloaded": "^4.1.0" 7 | }, 8 | "devDependencies": { 9 | "qunit": "^2.0.0" 10 | }, 11 | "homepage": "https://github.com/metafizzy/flickity-imagesloaded", 12 | "authors": [ 13 | "David DeSandro" 14 | ], 15 | "description": "Enable imagesLoaded option for Flickity", 16 | "keywords": [ 17 | "flickity", 18 | "imagesloaded" 19 | ], 20 | "license": "MIT", 21 | "ignore": [ 22 | "**/.*", 23 | "node_modules", 24 | "bower_components", 25 | "test", 26 | "tests", 27 | "package.json" 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /flickity-imagesloaded.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Flickity imagesLoaded v2.0.0 3 | * enables imagesLoaded option for Flickity 4 | */ 5 | 6 | /*jshint browser: true, strict: true, undef: true, unused: true */ 7 | 8 | ( function( window, factory ) { 9 | // universal module definition 10 | /*jshint strict: false */ /*globals define, module, require */ 11 | if ( typeof define == 'function' && define.amd ) { 12 | // AMD 13 | define( [ 14 | 'flickity/js/index', 15 | 'imagesloaded/imagesloaded' 16 | ], function( Flickity, imagesLoaded ) { 17 | return factory( window, Flickity, imagesLoaded ); 18 | }); 19 | } else if ( typeof module == 'object' && module.exports ) { 20 | // CommonJS 21 | module.exports = factory( 22 | window, 23 | require('flickity'), 24 | require('imagesloaded') 25 | ); 26 | } else { 27 | // browser global 28 | window.Flickity = factory( 29 | window, 30 | window.Flickity, 31 | window.imagesLoaded 32 | ); 33 | } 34 | 35 | }( window, function factory( window, Flickity, imagesLoaded ) { 36 | 'use strict'; 37 | 38 | Flickity.createMethods.push('_createImagesLoaded'); 39 | 40 | var proto = Flickity.prototype; 41 | 42 | proto._createImagesLoaded = function() { 43 | this.on( 'activate', this.imagesLoaded ); 44 | }; 45 | 46 | proto.imagesLoaded = function() { 47 | if ( !this.options.imagesLoaded ) { 48 | return; 49 | } 50 | var _this = this; 51 | function onImagesLoadedProgress( instance, image ) { 52 | var cell = _this.getParentCell( image.img ); 53 | _this.cellSizeChange( cell && cell.element ); 54 | if ( !_this.options.freeScroll ) { 55 | _this.positionSliderAtSelected(); 56 | } 57 | } 58 | imagesLoaded( this.slider ).on( 'progress', onImagesLoadedProgress ); 59 | }; 60 | 61 | return Flickity; 62 | 63 | })); 64 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "flickity-imagesloaded", 3 | "version": "2.0.0", 4 | "description": "Enable imagesLoaded option for Flickity", 5 | "main": "flickity-imagesloaded.js", 6 | "dependencies": { 7 | "flickity": "^2.0.0", 8 | "imagesloaded": "^4.1.0" 9 | }, 10 | "devDependencies": {}, 11 | "scripts": { 12 | "test": "echo \"Error: no test specified\" && exit 1" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "git://github.com/metafizzy/flickity-imagesloaded.git" 17 | }, 18 | "keywords": [ 19 | "flickity", 20 | "imagesloaded", 21 | "browser", 22 | "DOM" 23 | ], 24 | "author": "David DeSandro", 25 | "license": "MIT", 26 | "bugs": { 27 | "url": "https://github.com/metafizzy/flickity-imagesloaded/issues" 28 | }, 29 | "homepage": "https://github.com/metafizzy/flickity-imagesloaded", 30 | "directories": { 31 | "test": "test" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /test/.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "browser": true, 3 | "devel": true, 4 | "strict": true, 5 | "undef": true, 6 | "unused": true, 7 | "globals": { 8 | "Flickity": false, 9 | "imagesLoaded": false, 10 | "isPositionApprox": false, 11 | "QUnit": false 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /test/helpers.js: -------------------------------------------------------------------------------- 1 | // position values can be off by 0.1% or 1px 2 | // isPositionApprox( '185.2px', 185 ) => true 3 | window.isPositionApprox = function( value, expected ) { 4 | var isPercent = value.indexOf('%') != -1; 5 | value = parseFloat( value ); 6 | var diff = Math.abs( expected - value ); 7 | return isPercent ? diff < 0.1 : diff <= 1; 8 | }; 9 | -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Flickity tests 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 |
53 | 54 |

images

55 | 56 | 68 | 69 | 80 | 81 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /test/tests.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: sans-serif; 3 | color: #333; 4 | } 5 | 6 | .gallery { 7 | border: 1px solid; 8 | width: 400px; 9 | margin-bottom: 40px; 10 | } 11 | 12 | .gallery img { 13 | display: block; 14 | height: 140px; 15 | } 16 | -------------------------------------------------------------------------------- /test/unit/images-in-divs-in-divs.js: -------------------------------------------------------------------------------- 1 | QUnit.test( 'images-in-divs-in-divs', function( assert ) { 2 | 'use strict'; 3 | 4 | var done = assert.async(); 5 | var gallery = document.querySelector('#images-in-divs-in-divs'); 6 | 7 | var flkty = new Flickity( gallery, { 8 | imagesLoaded: true, 9 | percentPosition: false 10 | }); 11 | 12 | imagesLoaded( gallery, function() { 13 | var cellX = 0; 14 | for ( var i=0, len = flkty.cells.length; i < len; i++ ) { 15 | var cell = flkty.cells[i]; 16 | assert.ok( cell.size.width, 'cell has width' ); 17 | var isApprox = isPositionApprox( cell.element.style.left, cell.x ); 18 | assert.ok( isApprox, 'cell ' + i + 'at proper position' ); 19 | cellX += cell.size.width; 20 | } 21 | 22 | assert.equal( flkty.viewport.style.height, '140px', 'gallery height set' ); 23 | 24 | done(); 25 | }); 26 | 27 | }); 28 | -------------------------------------------------------------------------------- /test/unit/images-in-divs.js: -------------------------------------------------------------------------------- 1 | QUnit.test( 'images-in-divs', function( assert ) { 2 | 'use strict'; 3 | 4 | var done = assert.async(); 5 | var gallery = document.querySelector('#images-in-divs'); 6 | 7 | var flkty = new Flickity( gallery, { 8 | imagesLoaded: true, 9 | percentPosition: false 10 | }); 11 | 12 | imagesLoaded( gallery, function() { 13 | var cellX = 0; 14 | for ( var i=0, len = flkty.cells.length; i < len; i++ ) { 15 | var cell = flkty.cells[i]; 16 | assert.ok( cell.size.width, 'cell has width' ); 17 | var isApprox = isPositionApprox( cell.element.style.left, cell.x ); 18 | assert.ok( isApprox, 'cell ' + i + 'at proper position' ); 19 | cellX += cell.size.width; 20 | } 21 | 22 | assert.equal( flkty.viewport.style.height, '140px', 'gallery height set' ); 23 | 24 | done(); 25 | }); 26 | 27 | }); 28 | -------------------------------------------------------------------------------- /test/unit/images.js: -------------------------------------------------------------------------------- 1 | QUnit.test( 'images', function( assert ) { 2 | 'use strict'; 3 | 4 | var done = assert.async(); 5 | var gallery = document.querySelector('#images'); 6 | 7 | var flkty = new Flickity( gallery, { 8 | imagesLoaded: true, 9 | percentPosition: false 10 | }); 11 | 12 | imagesLoaded( gallery, function() { 13 | var cellX = 0; 14 | for ( var i=0, len = flkty.cells.length; i < len; i++ ) { 15 | var cell = flkty.cells[i]; 16 | assert.ok( cell.size.width, 'cell has width' ); 17 | var isApprox = isPositionApprox( cell.element.style.left, cell.x ); 18 | assert.ok( isApprox, 'cell ' + i + 'at proper position' ); 19 | cellX += cell.size.width; 20 | } 21 | 22 | assert.equal( flkty.viewport.style.height, '140px', 'gallery height set' ); 23 | 24 | done(); 25 | }); 26 | 27 | }); 28 | --------------------------------------------------------------------------------