Easy Flickr Photo Gallery Plugin With jQuery - FWI

Flickr Webalbum Integration (FWI) is an easy yet fully configurable jQuery Flickr Gallery plugin that retrieves albums and photos from any Flickr account and generates a photo gallery with Colorbox integration.

How to use it:

1. Load the necessary jQuery library and jQuery colorbox plugin in the document.

<script src="/path/to/jquery.min.js"></script>
<link href="/path/to/colorbox.css" rel="stylesheet">
<script src="/path/to/jquery.colorbox-min.js"></script>

2. Load the Flickr Webalbum Integration plugin's files in the document.

<link href="css/fwi.css" rel="stylesheet">
<script src="js/jquery.fwi.js"></script>

3. Create a placeholder element for the Flickr gallery.

<div id="myGallery"> </div>

4. Initialize the plugin and insert your own API key and username to the JavaScript as these:

$("#myGallery").fwi({
  username: '[email protected]',
  api_key: "YOUR API KEY"
});

5. Customize the Flickr gallery by overriding the following default settings.

$("#myGallery").fwi({

  // album, albums, latest
  mode: 'albums', 

  // for loading a single album 
  album: "",        

  // filter photo's within album using the photo-tag
  keyword: "", 

  // Only show albums containing one of these keywords in the description.
  // Use [keywords: "kw1", "kw2"] within the description
  albumKeywords: [], 

  // Flickr returns max 500 items per request
  maxResults: 500,    

  // thumbnail size
  thumbSize: 150, 

  // thumbnail size of albumthumbs
  albumThumbSize: 150, 

  // initial page for an photo page        
  page: 1, 

  // photo size
  photoSize: "90%",

  // video size
  videoSize: "70%",

  // 'top', 'bottom', 'both' (for both albums and album paging)
  showPager: 'bottom', 

  // loading indicator
  loadingImage: "",

  // align thumbs vertically between rows
  thumbAlign: false, 

  // ASC_DATE, DESC_DATE, ASC_NAME, DESC_NAME
  sortAlbums: "none",     

  // ASC_DATE, DESC_DATE, ASC_NAME, DESC_NAME  
  sortPhotos: "none",          

  // used to combine several albums by using the same rel-tag or split albums that are accidentally combined by using different rel-tags 
  ownRelTag: "",          

  // folling settings should be self-explanatory
  showAlbumTitles: true,  
  showAlbumdate: false,
  showAlbumPhotoCount: true,
  showPhotoTitle: false,
  showPhotoDownloadPopup: false,
  showPhotoDate: true,

  // shows the counters below the pictures when more pages are available
  showPageCounter: true,          

  // do not scroll to the top of the window when the albun is refreshed
  windowNoScroll: false,       

  // video border image   
  videoBorder: "images/video.png",

  // custom labels
  labels: {
      photo: "photo",
      photos: "photos",
      albums: "Back to albums",
      noalbums: "No albums available",
      page: "Page",
      prev: "Previous",
      next: "Next"
  },

  // month names
  months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],

  // colorbox configurations
  colorbox_config: {
      config_photos: {
          rel             : 'flickr', 
          speed           : 0, 
          maxWidth        : "90%",
          maxHeight       : "90%",
          title           : formatPhotoTitleColorBox,
          current         : "Photo {current} of {total}"
      },
      config_youtube: {
          rel             : 'youtube', 
          iframe          : true,
          innerWidth      : "70%",
          innerHeight     : "70%",
          current         : "Video {current} of {total}"
      }
  }

});

---

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