https://github.com/compwright/facebook-photo-selector
An easy-to-use Facebook Photo Selector jQuery plugin built for Twitter Bootstrap
https://github.com/compwright/facebook-photo-selector
Last synced: 5 months ago
JSON representation
An easy-to-use Facebook Photo Selector jQuery plugin built for Twitter Bootstrap
- Host: GitHub
- URL: https://github.com/compwright/facebook-photo-selector
- Owner: compwright
- Created: 2013-10-18T00:19:03.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2013-10-18T00:49:53.000Z (over 12 years ago)
- Last Synced: 2024-12-30T03:40:24.617Z (over 1 year ago)
- Language: CSS
- Homepage: http://compwright.github.io/demos/facebook-photo-selector/
- Size: 223 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Facebook Photo Selector
An easy-to-use Facebook Photo Selector jQuery plugin built for Twitter Bootstrap.
[View Demo](http://compwright.github.io/demos/facebook-photo-selector/) or [Download the Plugin](https://raw.github.com/compwright/facebook-photo-selector/master/facebookphotoselector.jquery.js)
## License
This work is published under the [MIT License](http://opensource.org/licenses/MIT).
## Usage
### Initializing the Facebook SDK
This plugin needs a fully-working instance of the [Facebook Javascript SDK](), which you can set by calling `FacebookPhotoSelector.setFacebookSDK()`.
```
$.getScript('//connect.facebook.net/en_US/all.js', function()
{
FB.init({
appId : 'YOUR-APP-ID',
channelUrl : '//your-domain.com/fb-channel.html',
status : true,
xfbml : false
});
FacebookPhotoSelector.setFacebookSDK(FB);
});
```
### Photo Selector Modal
Set up a Twitter Bootstrap modal similar to the following:
```
```
Note that you do not have to follow this exact markup. All of the CSS classes may be customized.
The following CSS is also recommended so that the scrolling, loading indicator, and selected states work properly.
```
.thumbnail.selected {
background-color: #428bca;
}
.loading {
text-align: center;
}
.modal-body {
max-height: 600px;
overflow-y: auto;
}
```
### Activate the jQuery Plugin
To use the plugins, simply call the `.facebookPhotoSelector()` plugin on your modal.
```
$('#facebook_photo_selector').facebookPhotoSelector({
onFinalSelect : function(photos)
{
console.log(photos);
}
});
```
## Configuration
Global defaults may be set using `$.fn.facebookPhotoSelector.defaults` or they may be passed when you activate the plugin.
Here is a full list of available options:
```
$.fn.facebookPhotoSelector.defaults = {
fbsdkPollInterval : 100, // Polling interval in milliseconds to use when waiting for the Facebook SDK
selectors : {
albums : 'select.fbps-albums', // selector for the album list container
photos : '.fbps-photos', // selector for the photo list container
btnCancel : '.fbps-cancel', // selector for the "Cancel" button
btnSelect : '.fbps-select' // selector for the "Select Photo" button
},
fbsdk : false, // Facebook Javascript SDK instance
fbscope : 'user_photos', // CSV list of Facebook permissions required
photoColumns : 4, // Number of columns to display photos in
photosPerPage : 20, // Number of photos to load at a time
selectLimit : 1, // Number of photos that may be selected at a time
onBeforeInit : function() {},
onLoadPhotos : function() {},
onLoadAlbums : function() {},
onAlbumChange : function() {},
onSelect : function() {},
onFinalSelect : function() {}
};
```
## Callbacks
Callback | Description
--------------------------------|--------------------------------------------------------------------------------------
onBeforeInit(modal) | Fires before the plugin initializes a modal. Will be called once per modal.
onLoadPhotos(container, photos) | Fires whenever photos are loaded from Facebook.
onLoadAlbums(container, albums) | Fires whenever albums are loaded from Facebook.
onAlbumChange(albumId) | Fires when the user changes photo albums.
onSelect(photoId) | Fires when the user selects a photo.
onFinalSelect(photos) | Fires when the user clicks Select Photo button as specified by `selectors.btnSelect`.