Webdesign Inspiration: Facebook Like Image Gallery

Display always fixed number of images, but if there is more images in gallery, show the number of remaining on the last displayed item. Code Snippet included.

The example is written in pure JavaScript, and for the lightbox effect, baguetteBox plugin is used.

Demo

For proper use, you need to follow also HTML markup and CSS styles. If you need to modify it, don’t forget to change JavaScript code, too.

Now it is expected, that HTML “img” tag is bounded by “span” tag, and number on last image is inserted into dynamically created “em” tag.

The easiest change is, if you only need to display different number of images. By default, it is set to 3, but to overwrite one variable is enough to say script how gallery should be displayed.