├── blank.gif ├── bower.json ├── demo.html ├── flex-images.css ├── flex-images.js ├── flex-images.min.js ├── 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 ├── package.json └── readme.md /blank.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pixabay/JavaScript-flexImages/7f505442a0904168be3f49290ff54ef9a8536786/blank.gif -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 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 | 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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /flex-images.js: -------------------------------------------------------------------------------- 1 | /* 2 | JavaScript flexImages v1.0.2 3 | Copyright (c) 2014 Simon Steinberger / Pixabay 4 | GitHub: https://github.com/Pixabay/JavaScript-flexImages 5 | License: http://www.opensource.org/licenses/mit-license.php 6 | */ 7 | 8 | var flexImages = (function(){ 9 | // "use strict"; 10 | function flexImages(options){ 11 | if (!document.querySelector) return; 12 | 13 | function makeGrid(grid, items, o, noresize){ 14 | var x, new_w, exact_w, ratio = 1, rows = 1, max_w = grid.clientWidth-2, row = [], row_width = 0, h, row_h = o.rowHeight; 15 | 16 | // define inside makeGrid to access variables in scope 17 | function _helper(lastRow){ 18 | if (o.maxRows && rows > 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; xn.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