A simple Javascript (no jQuery!) library which allows you to make a gallery and lightbox to view a Flickr photo album.
- Live Demo -- or open the file
/index.htmlin your browser - Documentation -- or open the file
/docs/index.htmlin your browser
- Fetches photos from a Flickr photoset and creates a gallery with thumbnails
- Clicking on thumbnail reveals a lightbox showing the fullsize picture and title
- Arrows to navigate between pictures
- Bonus: Use left and right arrow keys to navigate between pictures
See index.html.
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="lightbox.css" />
</head>
<body>
<div id="gallery-div" data-flickr-user="FLICKR_USER_ID" data-flickr-photoset="FLICKR_PHOTOSET_ID"></div>
<script src="lightbox.js"></script>
<script type="text/javascript">
var gallery = new Gallery("gallery-div");
</script>
</body>
</html>- You can use http://idgettr.com/ to find a Flickr User ID.
- A Flickr Photoset's ID can be found by looking at the end of the url of an album page on Flickr. For example, this album has a Photoset ID of 72157649350793497, since its URL is:
https://www.flickr.com/photos/parismadrid/sets/72157649350793497
This project was tested and works on Chrome 47.0, Firefox for Mac 43.0.2, Safari 8.0, and IE11.