This time I will share jQuery Plugin and tutorial about jQuery Plugin To Grab And Display Flickr Photosets – FlickrAlbum, hope it will help you in programming stack.
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.
1 |
<div id="demo"><h3>Album</h3></div> |
3. Place the latest jQuery library and the jQuery FlickrAlbum plugin at the bottom of your webpage.
1 |
<script src="//code.jquery.com/jquery-1.12.2.min.js"></script> |
2 |
<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.
1 |
$( "#album1" ).flickrAlbum({ |
3 |
photoset_id: "PHOTOSET ID", |
5. Change the default list size. “s” is a thumbnail of 75×75 px. All sizes are listed here.
- s: small square 75×75
- q: large square 150×150
- 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
1 |
$( "#album1" ).flickrAlbum({ |
3 |
photoset_id: "PHOTOSET ID", |
6. Change the default image size. The link is inserted in the listed image attribute "data-photo_item_url". All sizes are listed here.
1 |
$( "#album1" ).flickrAlbum({ |
3 |
photoset_id: "PHOTOSET ID", |
This awesome jQuery plugin is developed by matiasbenedetto. For more Advanced Usages, please check the demo page or visit the official website.
