├── blank.gif ├── bower.json ├── demo.html ├── flex-images.jquery.json ├── 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 ├── jquery.flex-images.css ├── jquery.flex-images.js ├── jquery.flex-images.min.js └── readme.md /blank.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pixabay/jQuery-flexImages/7c39a575b416ba0410ddde0349978d9cca74d2ce/blank.gif -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery-flex-images", 3 | "description": "A lightweight jQuery plugin for creating fluid galleries as seen on Flickr and Google Images.", 4 | "version": "1.0.4", 5 | "dependencies": { 6 | "jquery": ">=1.7" 7 | }, 8 | "main" : [ 9 | "jquery.flex-images.min.js", 10 | "jquery.flex-images.css" 11 | ], 12 | "homepage": "https://github.com/Pixabay/jQuery-flexImages", 13 | "authors": [{ 14 | "name": "Simon Steinberger", 15 | "url": "https://pixabay.com/users/Simon/", 16 | "email": "simon@pixabay.com" 17 | }], 18 | "keywords": [ 19 | "images", 20 | "pictures", 21 | "photos", 22 | "videos", 23 | "responsive", 24 | "layout", 25 | "gallery", 26 | "fluid", 27 | "grid", 28 | "flexible", 29 | "jQuery" 30 | ], 31 | "licenses": [{ 32 | "type": "MIT", 33 | "url": "http://www.opensource.org/licenses/mit-license.php" 34 | }], 35 | "ignore": [ 36 | "bower.json", 37 | "demo.html", 38 | "flex-images.jquery.json", 39 | "readme.md" 40 | ] 41 | } 42 | -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery flexImages Plugin 5 | 6 | 7 | 8 | 9 | 10 | 59 | 60 | 61 | 62 |
63 |

flexImages

64 |

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

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

Overview and Features

72 |

73 | Released under the MIT License. 74 | Source on Github (changelog). 75 | Compatible with jQuery 1.7.0+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+. No dependencies except the jQuery library. 76 | A vanilla JavaScript version is available, which works down to IE8. 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 jquery.flex-images.css in the <head> section of your HTML document - and the JavaScript file jquery.flex-images.min.js after loading jQuery. 121 | flexImages accepts settings from an object of key/value pairs. 122 |

123 | 
$(selector).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 |
PropertyDefaultDescription
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.
139 | 140 |

Example Code

141 |

HTML Markup

142 | 143 | 
144 | <div class="flex-images">
145 |     <div class="item" data-w="200" data-h="150"><img src="image1.jpg"></div>
146 |     <div class="item" data-w="250" data-h="150"><img src="image2.jpg"></div>
147 |     <div class="item" data-w="150" data-h="150"><img src="image3.jpg"></div>
148 |     <div class="item" data-w="150" data-h="150"><img src="image4.jpg"></div>
149 |     <div class="item" data-w="200" data-h="150"><img src="image5.jpg"></div>
150 |     <div class="item" data-w="100" data-h="150"><img src="image6.jpg"></div>
151 |     <div class="item" data-w="180" data-h="150"><img src="image7.jpg"></div>
152 |     <div class="item" data-w="185" data-h="150"><img src="image8.jpg"></div>
153 |     <div class="item" data-w="350" data-h="150"><img src="image9.jpg"></div>
154 |     <div class="item" data-w="200" data-h="150"><img src="image10.jpg"></div>
155 |     <div class="item" data-w="165" data-h="150"><img src="image11.jpg"></div>
156 |     <div class="item" data-w="150" data-h="150"><img src="image12.jpg"></div>
157 |     <div class="item" data-w="120" data-h="150"><img src="image13.jpg"></div>
158 |     <div class="item" data-w="120" data-h="150"><img src="image14.jpg"></div>
159 | </div>
160 | 161 |

162 | 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. 163 |

164 |

JavaScript code

165 | 166 | 
$('.flex-images').flexImages({rowHeight: 140});
167 | 168 |

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

173 |

174 | This architecture enables a very flexible grid layout that works with more than just images. 175 | 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. 176 |

177 | 178 |

More Examples

179 |

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

180 | 181 |

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

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

196 | 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. 197 | On init, the plugin will replace the dummy src attribute (blank.gif) with the actual source URL for all visible images. 198 |

199 | 200 |

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

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

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

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

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

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

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

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

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

285 |
286 | 287 |
288 | 289 |

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

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

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

307 |
308 | 309 |
310 |
311 | About Us 312 | Blog 313 | More Goodies 314 | © Pixabay.com / Simon Steinberger / Hans Braxmeier 315 |
316 |
317 | 318 |
319 | 320 | 321 | 339 | 340 | 341 | -------------------------------------------------------------------------------- /flex-images.jquery.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "flex-images", 3 | "title": "flexImages", 4 | "description": "A lightweight jQuery plugin for creating fluid galleries as seen on Flickr and Google Images.", 5 | "version": "1.0.4", 6 | "dependencies": { 7 | "jquery": ">=1.5" 8 | }, 9 | "keywords": [ 10 | "images", 11 | "pictures", 12 | "photos", 13 | "videos", 14 | "responsive", 15 | "layout", 16 | "gallery", 17 | "fluid", 18 | "grid", 19 | "flexible", 20 | "jQuery" 21 | ], 22 | "author": { 23 | "name": "Simon Steinberger", 24 | "url": "https://pixabay.com/users/Simon/", 25 | "email": "simon@pixabay.com" 26 | }, 27 | "licenses": [ 28 | { 29 | "type": "MIT", 30 | "url": "http://www.opensource.org/licenses/mit-license.php" 31 | } 32 | ], 33 | "homepage": "https://goodies.pixabay.com/jquery/flex-images/demo.html", 34 | "demo": "https://goodies.pixabay.com/jquery/flex-images/demo.html" 35 | } -------------------------------------------------------------------------------- /images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pixabay/jQuery-flexImages/7c39a575b416ba0410ddde0349978d9cca74d2ce/images/1.jpg -------------------------------------------------------------------------------- /images/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pixabay/jQuery-flexImages/7c39a575b416ba0410ddde0349978d9cca74d2ce/images/10.jpg -------------------------------------------------------------------------------- /images/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pixabay/jQuery-flexImages/7c39a575b416ba0410ddde0349978d9cca74d2ce/images/11.jpg -------------------------------------------------------------------------------- /images/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pixabay/jQuery-flexImages/7c39a575b416ba0410ddde0349978d9cca74d2ce/images/12.jpg -------------------------------------------------------------------------------- /images/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pixabay/jQuery-flexImages/7c39a575b416ba0410ddde0349978d9cca74d2ce/images/13.jpg -------------------------------------------------------------------------------- /images/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pixabay/jQuery-flexImages/7c39a575b416ba0410ddde0349978d9cca74d2ce/images/14.jpg -------------------------------------------------------------------------------- /images/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pixabay/jQuery-flexImages/7c39a575b416ba0410ddde0349978d9cca74d2ce/images/15.jpg -------------------------------------------------------------------------------- /images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pixabay/jQuery-flexImages/7c39a575b416ba0410ddde0349978d9cca74d2ce/images/2.jpg -------------------------------------------------------------------------------- /images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pixabay/jQuery-flexImages/7c39a575b416ba0410ddde0349978d9cca74d2ce/images/3.jpg -------------------------------------------------------------------------------- /images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pixabay/jQuery-flexImages/7c39a575b416ba0410ddde0349978d9cca74d2ce/images/4.jpg -------------------------------------------------------------------------------- /images/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pixabay/jQuery-flexImages/7c39a575b416ba0410ddde0349978d9cca74d2ce/images/5.jpg -------------------------------------------------------------------------------- /images/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pixabay/jQuery-flexImages/7c39a575b416ba0410ddde0349978d9cca74d2ce/images/6.jpg -------------------------------------------------------------------------------- /images/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pixabay/jQuery-flexImages/7c39a575b416ba0410ddde0349978d9cca74d2ce/images/7.jpg -------------------------------------------------------------------------------- /images/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pixabay/jQuery-flexImages/7c39a575b416ba0410ddde0349978d9cca74d2ce/images/8.jpg -------------------------------------------------------------------------------- /images/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pixabay/jQuery-flexImages/7c39a575b416ba0410ddde0349978d9cca74d2ce/images/9.jpg -------------------------------------------------------------------------------- /jquery.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 | -------------------------------------------------------------------------------- /jquery.flex-images.js: -------------------------------------------------------------------------------- 1 | /* 2 | jQuery flexImages v1.0.4 3 | Copyright (c) 2014 Simon Steinberger / Pixabay 4 | GitHub: https://github.com/Pixabay/jQuery-flexImages 5 | License: http://www.opensource.org/licenses/mit-license.php 6 | */ 7 | 8 | (function($){ 9 | $.fn.flexImages = function(options){ 10 | var o = $.extend({ container: '.item', object: 'img', rowHeight: 180, maxRows: 0, truncate: 0 }, options); 11 | return this.each(function(){ 12 | var grid = $(this), containers = $(grid).find(o.container), items = [], t = new Date().getTime(), 13 | s = window.getComputedStyle ? getComputedStyle(containers[0], null) : containers[0].currentStyle; 14 | o.margin = (parseInt(s.marginLeft) || 0) + (parseInt(s.marginRight) || 0) + (Math.round(parseFloat(s.borderLeftWidth)) || 0) + (Math.round(parseFloat(s.borderRightWidth)) || 0); 15 | for (j=0;j o.maxRows || o.truncate && lastRow && rows > 1) row[x][0].style.display = 'none'; 36 | else { 37 | if (row[x][4]) { row[x][3].attr('src', row[x][4]); row[x][4] = ''; } 38 | row[x][0].style.width = new_w+'px'; 39 | row[x][0].style.height = row_h+'px'; 40 | row[x][0].style.display = 'block'; 41 | } 42 | } 43 | 44 | for (i=0; i= max_w) { 48 | var margins_in_row = row.length * o.margin; 49 | ratio = (max_w-margins_in_row) / (row_width-margins_in_row), row_h = Math.ceil(o.rowHeight*ratio), exact_w = 0, new_w; 50 | for (x=0; x max_w) new_w -= exact_w - max_w; 54 | _helper(); 55 | } 56 | // reset for next row 57 | row = [], row_width = 0; 58 | rows++; 59 | } 60 | } 61 | // layout last row - match height of last row to previous row 62 | for (x=0; xr.maxRows||r.truncate&&t&&d>1?w[g][0].style.display="none":(w[g][4]&&(w[g][3].attr("src",w[g][4]),w[g][4]=""),w[g][0].style.width=l+"px",w[g][0].style.height=u+"px",w[g][0].style.display="block")}var g,l,s=1,d=1,f=t.width()-2,w=[],c=0,u=r.rowHeight;for(f||(f=t.width()-2),i=0;i=f){var m=w.length*r.margin;for(s=(f-m)/(c-m),u=Math.ceil(r.rowHeight*s),exact_w=0,l,g=0;gf&&(l-=exact_w-f),o();w=[],c=0,d++}for(g=0;g