Skip to content
Switch branches/tags
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


flickrGal is a fully responsive, easy to use gallery utilising the flickr api. It pulls specified image collections from a flickr account.

The primary goal of flickrGal is to provide a super fast flickr gallery that can be painlessly integrated and configured.

It's perfect for Photographers, Artists, or anyone wanting to showcase their work on a website with minimal hassle.

Written purely in javascript, with no external dependencies.

flickrGal Demo

Download flickGal

View Demo


Note - remember not to use your api key for anything important in production, I haven't provided any method for storing api keys here. That bit's up to you.

To get going with flickrGal, simply add the flickrGal div somewhere on your page. You'll need to set data-apikey and data-userid to the values obtained by requesting your flickr api key. See flickr's instructions for info on how to request that.

<div id="flickrgal" data-collections='["all"]' data-apikey='yourApiKey' data-userid='yourUserId'></div>

Use the collections data attribute to specify which collections you want to load. all will load every photoset from every collection. Collections can also be specified individually like so:

<div id="flickrgal" data-collections='["My Collection", "Another Collection"]' data-apikey='yourApiKey' data-userid='yourUserId'></div>

The gallery will expand to the full width of whatever container it's inside, and behave according to the defined grid and breakpoints (more about those in configuration).


When displaying all or multiple collections on a single page, an option can be used to seperate collections into sections using the data-titles data attribute:

<div id="flickrgal" data-collections='["My Collection", "Another Collection"]' data-titles data-apikey='yourApiKey' data-userid='yourUserId'></div>



If you're using the included sass in your project, various aspects of the flickrGal layout and style are easy to configure. Important ones are at the top of flickrgal.scss


Colours can be set using the following variables:

// Colours
$colours: (
	primary-accent: #0076E3, // Main gallery accent colour
	secondary-accent: #ff1981, 
	lightbox: #000B10

Image Grid

Behavior and properties of images in the grid can be modified using the image-grid map:

// Image Variables
$image-grid: (
	aspect:  4/3, // Set image aspect ratio e.g. 4/3 == 4:3 
	padding: 5px, // Space between images
	default-cols: 3 // Default number of columns


Gallery breakpoints can be added, removed, and modified using the breakpoints map:

// Gallery Breakpoints (max-width, columns)
$breakpoints: (
	(750px, 2),
	(450px, 1)

Browser Compatibility



flickrGal is a fully responsive gallery utilising the flickr api. Written in pure javascript, with no external dependencies.




No releases published


No packages published