flickrGal is a fully responsive gallery utilising the flickr api. Written in pure javascript, with no external dependencies.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
_includes
_layouts
_sass
assets/js
css
dist
.gitignore
Gemfile
Gemfile.lock
Gruntfile.js
README.md
_config.yml
index.html
package-lock.json
package.json
preview.jpg

README.md

flickrGal

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

Usage

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).

Options

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>

Configuration

CSS

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

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
);

Breakpoints

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

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

Browser Compatibility

Development