https://github.com/jguadagno/twbs-flickrcarousel
Twitter Bootstrap Flickr Carousel is a jQuery plugin that uses the power of the Twitter Bootstrap Carousel plugin to cycle through images on Flickr.
https://github.com/jguadagno/twbs-flickrcarousel
Last synced: about 2 months ago
JSON representation
Twitter Bootstrap Flickr Carousel is a jQuery plugin that uses the power of the Twitter Bootstrap Carousel plugin to cycle through images on Flickr.
- Host: GitHub
- URL: https://github.com/jguadagno/twbs-flickrcarousel
- Owner: jguadagno
- License: apache-2.0
- Created: 2014-09-03T03:51:40.000Z (almost 11 years ago)
- Default Branch: main
- Last Pushed: 2020-06-19T14:12:32.000Z (almost 5 years ago)
- Last Synced: 2024-10-19T01:18:03.277Z (8 months ago)
- Language: JavaScript
- Size: 8.79 KB
- Stars: 3
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
## jQuery Twitter Bootstrap Flickr Carousel ##
### Basic Usage ###
```javascript
$('#flickr-carousel').twbsFlickrCarousel(
{tagsToSearchFor: 'mvpsummit,mvp2013,mvp13',
flickrApiKey: '',
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 `
` 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