This JS script grabs all albums and displays them. When you click on an album it shows the photos in that album. If you click on a photo it brings up a lightbox. It is 100% jQuery. See notes at the bottom for more details.
See index.html for simple working example.
- Create new facebook app. (https://developers.facebook.com/apps)
- Make sure you include the lightbox js file and css file
- Make sure you include the facebook JS SDK file
- Make sure you include the Facebook_Photo_Gallery_Widget JS file
- Include a div or any other html tag with the id "fb_gallery"
- Set custom attribute app_id=""
- Set custom attribute page_id=""
<!-- Load jQuery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<!-- Load LightBox - Used by Facebook Photo Gallery Widget -->
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<!-- Load Facebook JS SDK - Used by Facebook Photo Gallery Widget -->
<script src="http://connect.facebook.net/en_US/all.js"></script>
<!-- Load Facebook Photo Gallery Widget -->
<script src="/js/fb_gallery.js"></script>
<div id="fb_gallery" app_id="" page_id=""></div>
- You get an app_id after you create a new app
- You can find the page id by visiting that page in your browser.
- https://www.facebook.com/pages/Club-Billboards/104821622923594
- In the url above, the number at the end it the page_id. You can only use public pages, not peoples profiles.
- There is no CSS applied currently other than what the lightbox has applied.
- You don't have to worry about include facebooks . But if you have already included, just remove it from the fb_gallery.js file.