{"id":18821193,"url":"https://github.com/compwright/facebook-photo-selector","last_synced_at":"2026-01-18T05:30:20.365Z","repository":{"id":11261938,"uuid":"13664560","full_name":"compwright/facebook-photo-selector","owner":"compwright","description":"An easy-to-use Facebook Photo Selector jQuery plugin built for Twitter Bootstrap","archived":false,"fork":false,"pushed_at":"2013-10-18T00:49:53.000Z","size":228,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-12-30T03:40:24.617Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://compwright.github.io/demos/facebook-photo-selector/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/compwright.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-10-18T00:19:03.000Z","updated_at":"2016-03-25T17:37:13.000Z","dependencies_parsed_at":"2022-09-02T12:21:21.798Z","dependency_job_id":null,"html_url":"https://github.com/compwright/facebook-photo-selector","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/compwright%2Ffacebook-photo-selector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/compwright%2Ffacebook-photo-selector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/compwright%2Ffacebook-photo-selector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/compwright%2Ffacebook-photo-selector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/compwright","download_url":"https://codeload.github.com/compwright/facebook-photo-selector/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239758900,"owners_count":19692041,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-08T00:35:50.243Z","updated_at":"2025-02-20T01:13:50.817Z","avatar_url":"https://github.com/compwright.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Facebook Photo Selector\n\nAn easy-to-use Facebook Photo Selector jQuery plugin built for Twitter Bootstrap.\n\n[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)\n\n## License\n\nThis work is published under the [MIT License](http://opensource.org/licenses/MIT).\n\n## Usage\n\n### Initializing the Facebook SDK\n\nThis plugin needs a fully-working instance of the [Facebook Javascript SDK](), which you can set by calling `FacebookPhotoSelector.setFacebookSDK()`.\n\n```\n$.getScript('//connect.facebook.net/en_US/all.js', function()\n{\n\tFB.init({\n\t\tappId      : 'YOUR-APP-ID',\n\t\tchannelUrl : '//your-domain.com/fb-channel.html',\n\t\tstatus     : true,\n\t\txfbml      : false\n\t});\n\n\tFacebookPhotoSelector.setFacebookSDK(FB);\n});\n```\n\n### Photo Selector Modal\n\nSet up a Twitter Bootstrap modal similar to the following:\n\n```\n\u003c!-- Facebook photo selector modal --\u003e\n\u003cdiv id=\"facebook_photo_selector\" class=\"modal fade\"\u003e\n\t\u003cdiv class=\"modal-dialog\"\u003e\n\t\t\u003cdiv class=\"modal-content\"\u003e\n\t\t\t\u003cdiv class=\"modal-header\"\u003e\n\t\t\t\t\u003cbutton type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\"\u003e\u0026times;\u003c/button\u003e\n\t\t\t\t\u003ch4 class=\"modal-title\"\u003eChoose a photo\u003c/h4\u003e\n\t\t\t\u003c/div\u003e\n\t\t\t\u003cdiv class=\"modal-body\"\u003e\n\t\t\t\t\u003cdiv class=\"form\"\u003e\n\t\t\t\t\t\u003clabel\u003eSelect Facebook Album:\u003c/label\u003e\n\t\t\t\t\t\u003cselect class=\"fbps-albums\" name=\"facebook_photo_album\"\u003e\u003c/select\u003e\n\t\t\t\t\u003c/div\u003e\n\t\t\t\t\u003chr\u003e\n\t\t\t\t\u003cdiv class=\"fbps-photos clearfix\"\u003e\u003c/div\u003e\n\t\t\t\u003c/div\u003e\n\t\t\t\u003cdiv class=\"modal-footer\"\u003e\n\t\t\t\t\u003cbutton type=\"button\" class=\"btn btn-default fbps-cancel\" data-dismiss=\"modal\"\u003eClose\u003c/button\u003e\n\t\t\t\t\u003cbutton type=\"button\" class=\"btn btn-primary fbps-select\" data-dismiss=\"modal\"\u003eSelect Photo\u003c/button\u003e\n\t\t\t\u003c/div\u003e\n\t\t\u003c/div\u003e\u003c!-- /.modal-content --\u003e\n\t\u003c/div\u003e\u003c!-- /.modal-dialog --\u003e\n\u003c/div\u003e\u003c!-- /.modal --\u003e\n```\n\nNote that you do not have to follow this exact markup. All of the CSS classes may be customized.\n\nThe following CSS is also recommended so that the scrolling, loading indicator, and selected states work properly.\n\n```\n\u003cstyle type=\"text/css\"\u003e\n\t.thumbnail.selected {\n\t\tbackground-color: #428bca;\n\t}\n\t.loading {\n\t\ttext-align: center;\n\t}\n\t.modal-body {\n\t\tmax-height: 600px;\n\t\toverflow-y: auto;\n\t}\n\u003c/style\u003e\n```\n\n### Activate the jQuery Plugin\n\nTo use the plugins, simply call the `.facebookPhotoSelector()` plugin on your modal.\n\n```\n$('#facebook_photo_selector').facebookPhotoSelector({\n\tonFinalSelect : function(photos)\n\t{\n\t\tconsole.log(photos);\n\t}\n});\n```\n\n## Configuration\n\nGlobal defaults may be set using `$.fn.facebookPhotoSelector.defaults` or they may be passed when you activate the plugin.\n\nHere is a full list of available options:\n\n```\n$.fn.facebookPhotoSelector.defaults = {\n\tfbsdkPollInterval : 100,              // Polling interval in milliseconds to use when waiting for the Facebook SDK\n\tselectors : {\n\t\talbums    : 'select.fbps-albums', // selector for the album list container\n\t\tphotos    : '.fbps-photos',       // selector for the photo list container\n\t\tbtnCancel : '.fbps-cancel',       // selector for the \"Cancel\" button\n\t\tbtnSelect : '.fbps-select'        // selector for the \"Select Photo\" button\n\t},\n\tfbsdk         : false,                // Facebook Javascript SDK instance\n\tfbscope       : 'user_photos',        // CSV list of Facebook permissions required\n\tphotoColumns  : 4,                    // Number of columns to display photos in\n\tphotosPerPage : 20,                   // Number of photos to load at a time\n\tselectLimit   : 1,                    // Number of photos that may be selected at a time\n\tonBeforeInit  : function() {},\n\tonLoadPhotos  : function() {},\n\tonLoadAlbums  : function() {},\n\tonAlbumChange : function() {},\n\tonSelect      : function() {},\n\tonFinalSelect : function() {}\n};\n```\n\n## Callbacks\n\nCallback                        | Description\n--------------------------------|--------------------------------------------------------------------------------------\nonBeforeInit(modal)             | Fires before the plugin initializes a modal. Will be called once per modal.\nonLoadPhotos(container, photos) | Fires whenever photos are loaded from Facebook.\nonLoadAlbums(container, albums) | Fires whenever albums are loaded from Facebook.\nonAlbumChange(albumId)          | Fires when the user changes photo albums.\nonSelect(photoId)               | Fires when the user selects a photo.\nonFinalSelect(photos)           | Fires when the user clicks Select Photo button as specified by `selectors.btnSelect`.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcompwright%2Ffacebook-photo-selector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcompwright%2Ffacebook-photo-selector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcompwright%2Ffacebook-photo-selector/lists"}