Twitter Bootstrap Flickr Carousel is a jQuery plugin that uses the power of the Twitter Bootstrap Carousel plugin to cycle through images on Flickr.
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.
js
.gitignore
LICENSE
index.html
readme.md
twbs-flickrCarousel.jquery.json

readme.md

jQuery Twitter Bootstrap Flickr Carousel

Basic Usage

$('#flickr-carousel').twbsFlickrCarousel(
    {tagsToSearchFor: 'mvpsummit,mvp2013,mvp13', 
    flickrApiKey: '<insert your key here>', 
    paginationSelector: '#flickr-pagination'}
    );

Required Software

  • jQuery (v1.8 or higher)
  • Twitter Bootstrap (v3.0 or higher)
  • Twitter Bootstrap components (v3.0 or higher)

Settings

Setting Default Description
flickrApiKey empty string The Flickr Api Key to use
flickrApiUrl https://api.flickr.com/services/rest/ The Flickr Api Url
tagsToSearchFor empty string The tags that you want to search for. Multiple tags should be separated by commas (,)
width 600 The width of the carousel
height 600 The height of the carousel
imagesPerPage 10 The number of images that should be returned per query
pageNumber 1 The page number to start with
flickrSizeSuffix z The size of the image to retrieve, see the size chart below
flickrImageType jpg The image type to retrieve
paginationSelector #flickr-pagination The jQuery selector for the paging control to use *
paginationClass pagination The bootstrap pagination css class to use *
onPageClick null Not yet implemented
onLoadError null Not yet implemented

Flickr Image Size Chart

Size Code Size Type
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
  • | medium, 500 on longest side z | medium 640, 640 on longest side c | medium 800, 800 on longest side† b | large, 1024 on longest side* o | original image, either a jpg, gif or png, depending on source format

Pagination

If you want to use pagination with the carousel, this means it will automatically create the Previous | First | 1 | 2 | ... | Next | Last buttons, you will need the following.

Include the twbsPagination plugin in your source. It can be found here: https://github.com/esimakin/twbs-pagination. You need create a <div> tag with an id that you us for the paginationSelector setting.

Useful Links

ApiKey

You can visit https://www.flickr.com/services/api/misc.api_keys.html to obtain a Flickr Api Key

Flickr Apis used

flickr.photos.search

Return a list of photos matching some criteria. Only photos visible to the calling user will be returned. To return private or semi-private photos, the caller must be authenticated with 'read' permissions, and have permission to view the photos. Unauthenticated calls will only return public photos.

https://www.flickr.com/services/api/flickr.photos.search.html

flickr.photos.getInfo

Get information about a photo. The calling user must have permission to view the photo.

https://www.flickr.com/services/api/flickr.photos.getInfo.html

Photo Source Url

https://www.flickr.com/services/api/misc.urls.html