jQuery Plugin To Grab And Display Flickr Photosets - FlickrAlbum

File Size: 16.9 KB
Views Total: 1897
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Grab And Display Flickr Photosets - FlickrAlbum

FlickrAlbum is a very small jQuery plugin which retrieves albums and photos from any Flickr photosets using AJAX/JSON and the Flickr API.

How to use it:

1. First you need to register a new Flickr App and get the API key from here.

2. Create an html element where you want to place the Flickr photos.

<div id="demo"><h3>Album</h3></div>

3. Place the latest jQuery library and the jQuery FlickrAlbum plugin at the bottom of your webpage.

<script src="//code.jquery.com/jquery-1.12.2.min.js"></script>
<script src="dist/jqueryFlickrAlbum.js"></script>

4. Initialize the plugin, insert your own API key, and specify the photoset ID from which you want to retrieve the photos.

$( "#album1" ).flickrAlbum({
  api_key: "API KEY",
  photoset_id: "PHOTOSET ID",
});

5. Change the default list size. "s" is a thumbnail of 75x75 px. All sizes are listed here.

  • s: small square 75x75
  • q: large square 150x150
  • t: thumbnail, 100 on longest side
  • m: small, 240 on longest side
  • n: small, 320 on longest side
  • z: medium 640, 640 on longest side
  • c: medium 800, 800 on longest side†
  • b: large, 1024 on longest side*
  • h: large 1600, 1600 on longest side†
  • k: large 2048, 2048 on longest side†
  • o: original image, either a jpg, gif or png, depending on source format
$( "#album1" ).flickrAlbum({
  api_key: "API KEY",
  photoset_id: "PHOTOSET ID",
  listed_size: "s",
});

6. Change the default image size. The link is inserted in the listed image attribute "data-photo_item_url". All sizes are listed here.

$( "#album1" ).flickrAlbum({
  api_key: "API KEY",
  photoset_id: "PHOTOSET ID",
  listed_size: "s",
  sinlge_size: "z"
});

This awesome jQuery plugin is developed by matiasbenedetto. For more Advanced Usages, please check the demo page or visit the official website.