A vanilla JavaScript photo gallery plugin inspired by Google Photos.

How it works

There are three main processess that take place in this plugin. The first is detecting when the images are loaded, the second is the layout of the images, and the third is the animation of the images. The image loading detection is done by using the awesome ImagesLoaded by David DeSandro. The layout is achieved by modifying this Google Image Layout plugin by ptgamr.

The way the plugin works is that when the thumbnail images are loaded the layout calculations are performed and then then applied to the DOM, and finally the full size images are loaded and transformed to match the size and position of their thumbnail counterparts. The full size images are hidden by default and revealed when a thumbnail is clicked. This creates the illusion of the thumbnail transforming into the full size image.

View the documentation on how to setup the plugin here.