With this component you can display a gallery or portfolio with several categories. In this example I used the options 'Water' and 'Church' to show that the same image can appear in more than one category. If you click on an image, it will open a larger version. Use the browser's back button to return to the gallery.
The half-translucency of the .tileclass when hovered over is optional. If you want to change something of the tiles, e.g. the width or the bg-colour, it is the best to deactivate the other classes, so that the class .tileis the only one active. You can add or delete tiles until you get the number you want.
Filtered Gallery
With this component you can display a gallery or portfolio with several categories. In this example I used the options 'Water' and 'Church' to show that the same image can appear in more than one category. If you click on an image, it will open a larger version. Use the browser's back button to return to the gallery.
The half-translucency of the .tile class when hovered over is optional. If you want to change something of the tiles, e.g. the width or the bg-colour, it is the best to deactivate the other classes, so that the class .tile is the only one active. You can add or delete tiles until you get the number you want.
The gallery also works in IE11.
Download this component for 'mobile-up'
Download this component for 'desktop-down'