├── blank.gif ├── images ├── 1.jpg ├── 10.jpg ├── 11.jpg ├── 12.jpg ├── 13.jpg ├── 14.jpg ├── 15.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg ├── 7.jpg ├── 8.jpg └── 9.jpg ├── flex-images.css ├── package.json ├── bower.json ├── readme.md ├── flex-images.min.js ├── flex-images.js └── demo.html /blank.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pixabay/JavaScript-flexImages/HEAD/blank.gif -------------------------------------------------------------------------------- /images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pixabay/JavaScript-flexImages/HEAD/images/1.jpg -------------------------------------------------------------------------------- /images/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pixabay/JavaScript-flexImages/HEAD/images/10.jpg -------------------------------------------------------------------------------- /images/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pixabay/JavaScript-flexImages/HEAD/images/11.jpg -------------------------------------------------------------------------------- /images/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pixabay/JavaScript-flexImages/HEAD/images/12.jpg -------------------------------------------------------------------------------- /images/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pixabay/JavaScript-flexImages/HEAD/images/13.jpg -------------------------------------------------------------------------------- /images/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pixabay/JavaScript-flexImages/HEAD/images/14.jpg -------------------------------------------------------------------------------- /images/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pixabay/JavaScript-flexImages/HEAD/images/15.jpg -------------------------------------------------------------------------------- /images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pixabay/JavaScript-flexImages/HEAD/images/2.jpg -------------------------------------------------------------------------------- /images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pixabay/JavaScript-flexImages/HEAD/images/3.jpg -------------------------------------------------------------------------------- /images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pixabay/JavaScript-flexImages/HEAD/images/4.jpg -------------------------------------------------------------------------------- /images/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pixabay/JavaScript-flexImages/HEAD/images/5.jpg -------------------------------------------------------------------------------- /images/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pixabay/JavaScript-flexImages/HEAD/images/6.jpg -------------------------------------------------------------------------------- /images/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pixabay/JavaScript-flexImages/HEAD/images/7.jpg -------------------------------------------------------------------------------- /images/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pixabay/JavaScript-flexImages/HEAD/images/8.jpg -------------------------------------------------------------------------------- /images/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pixabay/JavaScript-flexImages/HEAD/images/9.jpg -------------------------------------------------------------------------------- /flex-images.css: -------------------------------------------------------------------------------- 1 | .flex-images { overflow: hidden; } 2 | .flex-images .item { float: left; margin: 4px; border: 1px solid #eee; box-sizing: content-box; overflow: hidden; position: relative; } 3 | .flex-images .item img { display: block; width: auto; height: 100%; } 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "javascript-flex-images", 3 | "version": "0.0.1", 4 | "description": "A lightweight vanilla JavaScript plugin for creating fluid galleries as seen on Flickr and Google Images.", 5 | "author": "Pixabay team", 6 | "main": "flex-images.js", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/Pixabay/JavaScript-flexImages.git" 10 | }, 11 | "keywords": [ 12 | "pixabay", 13 | "flexible", 14 | "images", 15 | "grid" 16 | ], 17 | "license": "MIT", 18 | "bugs": { 19 | "url": "https://github.com/Pixabay/JavaScript-flexImages/issues" 20 | }, 21 | "homepage": "https://goodies.pixabay.com/javascript/flex-images/demo.html" 22 | } 23 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "javascript-flex-images", 3 | "description": "A lightweight vanilla JavaScript plugin for creating fluid galleries as seen on Flickr and Google Images.", 4 | "version": "1.0.2", 5 | "main" : [ 6 | "flex-images.min.js", 7 | "flex-images.css" 8 | ], 9 | "homepage": "https://github.com/Pixabay/JavaScript-flexImages", 10 | "authors": [{ 11 | "name": "Simon Steinberger", 12 | "url": "https://pixabay.com/users/Simon/", 13 | "email": "simon@pixabay.com" 14 | }], 15 | "keywords": [ 16 | "images", 17 | "pictures", 18 | "photos", 19 | "videos", 20 | "responsive", 21 | "layout", 22 | "gallery", 23 | "fluid", 24 | "grid", 25 | "flexible" 26 | ], 27 | "licenses": [{ 28 | "type": "MIT", 29 | "url": "http://www.opensource.org/licenses/mit-license.php" 30 | }], 31 | "ignore": [ 32 | "bower.json", 33 | "demo.html", 34 | "readme.md" 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | JavaScript-flexImages 2 | =================== 3 | 4 | A lightweight vanilla JavaScript plugin for creating fluid galleries as seen on Flickr and Google Images. 5 | 6 | Tested in Firefox, Safari, Chrome, Opera, Internet Explorer 8+. No dependencies, written in plain JavaScript. 7 | Released under the MIT License: http://www.opensource.org/licenses/mit-license.php 8 | 9 | This plugin was developed by and for [Pixabay.com](https://pixabay.com/) - an international repository for sharing free public domain images. 10 | We have implemented this plugin in production and we share this piece of software - in the spirit of Pixabay - freely with others. 11 | 12 | ## Demo and Documentation 13 | 14 | https://goodies.pixabay.com/javascript/flex-images/demo.html 15 | 16 | ## Features 17 | 18 | * Lightweight: 2.1 kB of JavaScript - less than 1.0 kB gzipped 19 | * Source images/objects can have any size 20 | * Works with more than just images, e.g. videos, iframes and plain text 21 | * Responsive 22 | * Equal margins between images controlled via CSS 23 | * No cropping or reordering 24 | * AJAX ready, e.g. for infinite scrolling 25 | * Support for lazy loading of images and iframe contents 26 | * Layout options to control e.g. the maximum number of rows - or whether or not to display an incomplete (last) row. 27 | 28 | ## Changelog 29 | 30 | ### Version 1.0.2 - 2015/12/05 31 | 32 | * Fixed incorrect width in Chrome. 33 | 34 | ### Version 1.0.1 - 2015/10/30 35 | 36 | * Fixed error in calculation that caused the last image in each row to be cut off 37 | 38 | ### Version 1.0.0 - 2015/05/02 39 | 40 | * Initial release 41 | -------------------------------------------------------------------------------- /flex-images.min.js: -------------------------------------------------------------------------------- 1 | // JavaScript flexImages v1.0.2 2 | // https://github.com/Pixabay/JavaScript-flexImages 3 | var flexImages=function(){function e(e){function t(e,r,n,i){function o(e){n.maxRows&&g>n.maxRows||n.truncate&&e&&g>1?c[a][0].style.display="none":(c[a][4]&&(c[a][3].setAttribute("src",c[a][4]),c[a][4]=""),c[a][0].style.width=l+"px",c[a][0].style.height=h+"px",c[a][0].style.display="block")}for(var a,l,s,d,f=1,g=1,u=e.clientWidth-2,c=[],m=0,h=n.rowHeight,w=0;w=u){var p=c.length*n.margin;for(f=(u-p)/(m-p),h=Math.ceil(n.rowHeight*f),s=0,l,a=0;au&&(l-=s-u),o();c=[],m=0,g++}for(a=0;a o.maxRows || o.truncate && lastRow && rows > 1) row[x][0].style.display = 'none'; 19 | else { 20 | if (row[x][4]) { row[x][3].setAttribute('src', row[x][4]); row[x][4] = ''; } 21 | row[x][0].style.width = new_w+'px'; 22 | row[x][0].style.height = row_h+'px'; 23 | row[x][0].style.display = 'block'; 24 | } 25 | } 26 | 27 | for (var i=0; i= max_w) { 31 | var margins_in_row = row.length * o.margin; 32 | ratio = (max_w-margins_in_row) / (row_width-margins_in_row), row_h = Math.ceil(o.rowHeight*ratio), exact_w = 0, new_w; 33 | for (x=0; x max_w) new_w -= exact_w - max_w; 37 | _helper(); 38 | } 39 | // reset for next row 40 | row = [], row_width = 0; 41 | rows++; 42 | } 43 | } 44 | // layout last row - match height of last row to previous row 45 | for (x=0; x 2 | 3 | 4 | Vanilla JavaScript flexImages Plugin 5 | 6 | 7 | 8 | 9 | 10 | 60 | 61 | 62 | 63 |
64 |

flexImages

65 |

A lightweight vanilla JavaScript plugin for creating fluid galleries as seen on Flickr and Google Images.

66 | Download 67 |   68 | View on GitHub 69 |
70 | 71 |
72 |

Overview and Features

73 |

74 | Released under the MIT License. 75 | Source on Github (changelog). 76 | Tested in Firefox, Safari, Chrome, Opera, Internet Explorer 8+. No dependencies, written in plain JavaScript. 77 |

78 |
    79 |
  • Ridiculously tiny: 2.1 kB of JavaScript - less than 1.0 kB gzipped
    • 80 |
  • Source images/objects can have any size
    • 81 |
  • Works with more than just images, e.g. videos, iframes and plain text
    • 82 |
  • Responsive
    • 83 |
  • Equal margins between images controlled via CSS
    • 84 |
  • No cropping or reordering
    • 85 |
  • AJAX ready, e.g. for infinite scrolling
    • 86 |
  • Support for lazy loading of images and iframe contents
    • 87 |
  • Layout options to control e.g. the maximum number of rows - or whether or not to display an incomplete (last) row.
    • 88 |
89 |

90 | This plugin was developed by and for Pixabay.com - an international repository for free Public Domain images. 91 | We have implemented this plugin in production and we share this piece of software - in the spirit of Pixabay - freely with others. 92 |

93 | 94 |

Live Demo

95 |
96 | 97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 | 117 |
118 |

Usage

119 |

120 | Include the stylesheet flex-images.css in the <head> section of your HTML document - and the JavaScript file flex-images.min.js before the closing </body> tag. 121 | flexImages accepts settings from an object of key/value pairs. 122 |

123 | 
new flexImages({ key1: value1, key2: value2 });
124 |

125 | To update any settings or to reload modified content, simply re-initialize flexImages again on the appropriate container. 126 | The plugin automatically prevents multiple bindings to one and the same element. 127 | This may be used for content that gets modified later on via AJAX. 128 |

129 | 130 |

Settings

131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 |
PropertyDefaultDescription
selectorstring or DOM elementRequired selector for container or DOM element that holds the individual images/objects.
container'.item'Selector of the individual image/object containers.
object'img'Selector of the image/object inside a container.
rowHeight180Maximum height of a row.
maxRowsnullMaximum number of rows to display. Images/Objects exceeding this row are hidden.
truncatefalseHide incomplete last row of images/objects.
140 | 141 |

Example Code

142 |

HTML Markup

143 | 144 | 
<div class="flex-images">
145 |     <div class="item" data-w="219" data-h="180"><img src="images/1.jpg"></div>
146 |     <div class="item" data-w="279" data-h="180"><img src="images/2.jpg"></div>
147 |     <div class="item" data-w="270" data-h="180"><img src="images/3.jpg"></div>
148 |     <div class="item" data-w="270" data-h="180"><img src="images/4.jpg"></div>
149 |     <div class="item" data-w="147" data-h="180"><img src="images/5.jpg"></div>
150 |     <div class="item" data-w="276" data-h="180"><img src="images/6.jpg"></div>
151 |     <div class="item" data-w="319" data-h="180"><img src="images/7.jpg"></div>
152 |     <div class="item" data-w="270" data-h="180"><img src="images/8.jpg"></div>
153 |     <div class="item" data-w="240" data-h="180"><img src="images/9.jpg"></div>
154 |     <div class="item" data-w="270" data-h="180"><img src="images/10.jpg"></div>
155 |     <div class="item" data-w="240" data-h="180"><img src="images/11.jpg"></div>
156 |     <div class="item" data-w="270" data-h="180"><img src="images/12.jpg"></div>
157 |     <div class="item" data-w="283" data-h="180"><img src="images/13.jpg"></div>
158 |     <div class="item" data-w="271" data-h="180"><img src="images/14.jpg"></div>
159 |     <div class="item" data-w="258" data-h="180"><img src="images/15.jpg"></div>
160 | </div>
161 | 162 |

163 | Each image must be wrapped inside a container element. The container must have a width (data-w) and height (data-h) attribute set that corresponds to the image's/object's original dimension. 164 |

165 |

JavaScript code

166 | 167 | 
new flexImages({ selector: '.flex-images', rowHeight: 140 });
168 | 169 |

170 | How it works: The plugin dynamically changes the width and height of all containers. 171 | The images themselves have their height and width set to 100%. 172 | Thus, each image takes up the full space inside its container. 173 |

174 |

175 | This architecture enables a very flexible grid layout that works with more than just images. 176 | E.g. objects may be placed on top of the images via absolute positioning. Or instead of images, the containers may be filled with videos or even plain text. 177 |

178 | 179 |

More Examples

180 |

Please take a look at the source code of this page to see how these demos work.

181 | 182 |

1. Fixed number of two complete rows with lazy loading of images; only images that are actually visible are retrieved from the server:

183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |

197 | For lazy loading of images or iframes, it's required to use a "blank.gif" pixel as the source of all images. The actual source URL must be given in a data-src attribute of the image. 198 | On init, the plugin will replace the dummy src attribute (blank.gif) with the actual source URL for all visible images. 199 |

200 | 201 |

2. A fluid grid with video content and only full rows:

202 |
203 |
204 | 205 |
206 |
207 | 208 |
209 |
210 | 211 |
212 |
213 | 214 |

3. Showing a title underneath + less margin between images:

215 |
216 |
217 |
218 |
Caption 1
219 |
220 |
221 |
222 |
Caption 2
223 |
224 |
225 |
226 |
Caption 3
227 |
228 |
229 |
230 |
Caption 4
231 |
232 |
233 |
234 |
Caption 5
235 |
236 |
237 | 238 |

4. Overlaying caption - could be a link or a button, as well:

239 |
240 |
241 | 242 |
Caption 1
243 |
244 |
245 | 246 |
Caption 2
247 |
248 |
249 | 250 |
Caption 3
251 |
252 |
253 | 254 |
Caption 4
255 |
256 |
257 | 258 |
Caption 5
259 |
260 |
261 | 262 |

5. Cut off parts of the images, e.g. a Shutterstock ID:

263 |
264 |
265 | 266 | 267 | 268 |
269 |
270 | 271 | 272 | 273 |
274 |
275 | 276 | 277 | 278 |
279 |
280 | 281 | 282 | 283 |
284 |
285 |

Original (uncut) first image with Shutterstock ID at the bottom:

286 |
287 | 288 |
289 | 290 |

291 | This plugin is used in production on Pixabay.com, 292 | where you can see flexImages at work in various locations and with all available options. 293 | Please report any bugs and issues at the GitHub repositiory. 294 |

295 | 296 |
297 | 298 |
299 | 300 |
301 |
302 |
303 |
304 |
305 |
306 | 307 |

This software is released as Open Source under the MIT License by Simon Steinberger / Pixabay.com.

308 |
309 | 310 |
311 |
312 | About Us 313 | Blog 314 | More Goodies 315 | © Pixabay.com / Simon Steinberger / Hans Braxmeier 316 |
317 |
318 | 319 |
320 | 321 | 339 | 340 | 341 | 342 | --------------------------------------------------------------------------------