-
-
Save alexdunae/1239554 to your computer and use it in GitHub Desktop.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset='utf-8'> | |
| <title>Embedded Facebook Page Photo Gallery with jQuery</title> | |
| <style type='text/css'> #thumbs{float:left;width:200px;} #thumbs img{display:block;margin:0 0 10px;cursor:pointer;} #viewer{float:left;} </style> | |
| </head> | |
| <body> | |
| <h1>Embedded Facebook Page Photo Gallery with jQuery</h1> | |
| <h2></h2> | |
| <nav id='thumbs'></nav> | |
| <img id='viewer'> | |
| <script src="//code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script> | |
| <script type="text/javascript"> | |
| (function (gallery_id) { | |
| var title = $('h2'), | |
| viewer = $('#viewer'), | |
| thumbs = $('#thumbs'); | |
| // album info | |
| $.getJSON('//graph.facebook.com/' + gallery_id + '?callback=?', function(json, status, xhr) { | |
| title.html('<a href="' + json.link + '">' + json.name + '</a> from ' + json.from.name); | |
| }); | |
| // images | |
| $.getJSON('//graph.facebook.com/' + gallery_id + '/photos?callback=?', function(json, status, xhr) { | |
| var imgs = json.data; | |
| viewer.attr('src', imgs[0].images[0].source) | |
| for (var i = 0, l = imgs.length - 1; i < l; i++) { | |
| $('<img src="' + imgs[i].images[3].source + '" data-fullsize="' + imgs[i].images[0].source + '">').appendTo(thumbs); | |
| } | |
| $('img', thumbs).bind('click', function(e) { | |
| e.preventDefault(); | |
| viewer.attr('src', $(this).attr('data-fullsize')); | |
| }); | |
| }); | |
| })('426067170422'); // let's go -- put the gallery ID here | |
| </script> | |
| </body> | |
| </html> |
It appears that Facebook has made some changes today. Luckily I fixed the code for you. I also added a closure.
here's the html
<!DOCTYPE HTML>
<html>
<head>
<style>
#photo-thumbs{
width: 150px;
float: left;
height:600px;
overflow:auto;
}
#photo-viewer-cont{
width: 600px;
float: right;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.fbphotogallery.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<script type="text/javascript">
$(document).ready(function() {
$("#fb-photo-gallery").fbphotogallery('352411828128688');
});
(function($){
$.fn.fbphotogallery= function (gallery){
(this).html('<h2 id=\"photo-title\"></h2><div style=\"width: 952px; height: 360px;\"><div class=\"float-menu-css\" id=\"float-menu\"><center><div id=\"photo-thumbs\"></div></center></div><div id=\"photo-viewer-cont\" style=\"float: right; width:600px; margin-left:auto; margin-right:auto;\"><center><img id=\"photo-viewer\" src=\"http://i42.tinypic.com/nwdhc8.gif\"></center></div></div>');
var title = $('#photo-title'),
viewer = $('#photo-viewer'),
thumbs = $('#photo-thumbs')
gallery_id=gallery;
// album info
$.getJSON('http://graph.facebook.com/' + gallery_id + '?callback=?', function(json, status, xhr) {
title.html('<a href="' + json.link + '">' + json.name + '</a> from ' + json.from.name);
});
// images
$.getJSON('http://graph.facebook.com/' + gallery_id + '/photos/?limit=1000&callback=?', function(json, status, xhr) {
var imgs = json.data;
viewer.attr('src', imgs[0].source)
viewer.attr('alt', imgs[0].name)
for (var i = 0, l = imgs.length - 1; i < l; i++) {
$('<img src="' + imgs[i].picture + '" alt="' + imgs[i].name + '" data-fullsize="' + imgs[i].source + '">').appendTo(thumbs);
}
$("#float-menu").removeClass("float-menu-css").addClass("float-menu-css");
$('img', thumbs).bind('click', function(e) {
e.preventDefault();
$("#photo-viewer-cont").html('<center><img id=\"photo-viewer\" src=\"http://i42.tinypic.com/nwdhc8.gif\"></center>');
var viewer = $('#photo-viewer');
viewer.attr('src', $(this).attr('data-fullsize'));
viewer.attr('alt', $(this).attr('alt'));
});
});
};
})(jQuery);
</script></head>
<body>
<div id="fb-photo-gallery"></div>
</body>
</html>
@frye-guy what was the change FB made?
the json array changed
Sorry, I'm new to GitHub. I am not sure how to make my post appear right :-} How do you make code appear in your post
No worries -- indent it four spaces.
With these little gists, the best thing to do is click the 'fork' button -- that way I can see exactly what you changed.
thanks man for the update
wow
hey i try your b-gallery-embed.html code it is working but it shown not more than 30 pics and not shown latest first. So please tell me how i can do this.
Thanks
I know this is an old post but I am trying to modify either the gallery or original version to be 450px wide (if gallery version, include sidebar). How would I go about doing that?
Thank you Alex Dunae for sharing this! I'm currently using Frye-Guy's version at my site http://oseano.net/?x=fanart
I'm wondering how can I include the picture's caption with hyperlinks? Thank you in advance for your attention.
Hi there, just wondering how I can display the photos in an "instagram-like" format (grid)?
Thanks
Yes, how do we display the album in grid format or like facebookgalleria.com ?? Thanks!
thank you so much, this has saved me a lot of time
i made it work in my setup but i had to modify line 33 because i noticed that if the album contained just one image that was not showing in the thumbs div so i changed
i < l
to
i <= l
and now it is perfect :)
Need help to show the thumbnails of the pictures from the facebook account onto the website. Did copied the code but not working. Please help..
<title>APS</title> <script type="text/javascript" src="js/html5shiv.js"></script> <style type='text/css'> #thumbs{float:left;width:200px;} #thumbs img{display:block;margin:0 0 10px;cursor:pointer;} #viewer{float:left;} </style>
AMBIENCE PUBLIC SCHOOL
44th Annual Day Celebration 2015 in Siri Fort Auditorium
<script src="//code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function (1002933559771598) {
var title = $('h2'),
viewer = $('#viewer'),
thumbs = $('#thumbs');
// album info
$.getJSON('//graph.facebook.com/' + gallery_id + '?callback=?', function(json, status, xhr) {
title.html('<a href="' + json.link + '">' + json.name + '</a> from ' + json.from.name);
});
// images
$.getJSON('//graph.facebook.com/' + gallery_id + '/photos?callback=?', function(json, status, xhr) {
var imgs = json.data;
viewer.attr('src', imgs[0].images[0].source)
for (var i = 0, l = imgs.length - 1; i < l; i++) {
$('<img src="' + imgs[i].images[3].source + '" data-fullsize="' + imgs[i].images[0].source + '">').appendTo(thumbs);
}
$('img', thumbs).bind('click', function(e) {
e.preventDefault();
viewer.attr('src', $(this).attr('data-fullsize'));
});
});
})('1002933559771598');
</ul>
<ul>
<li><a href="cafeteria.html">Cafeteria</a></li>
<li><a href="our-curriculum-apporach.html">Our Curriculum Approach</a></li>
<li><a href="formative-years-programe.html">Formative Years Programme</a></li>
<li><a href="examination-and-evaluation.html">Examination & Evaluation</a></li>
<li><a href="cbse-result-for-xii.html">CBSE Results Online</a></li>
<li><a href="download-center.html">Download Center</a></li>
</ul>
<ul>
<li><a href="school-appointees.html">School Appointments</a></li>
<li><a href="club-and-socities.html">Clubs & Societies</a></li>
<li><a href="club-and-socities.html">School Houses</a></li>
<li><a href="cafeteria.html">Snack Menu for Kids</a></li>
<li><a href="online-registration-form.html">Online Registration</a></li>
</ul>
<ul class="last address">
<li>
<h3>Ambience Public School</h3>
<p> A-1, Safdurjung Enclave, New Delhi-110029 </p>
Phone : +91-11-47232000, 26109739, 26105548
info@ambiencepublicschool.com
Copyright 2013. All Right Reserved
The album to be connected is
https://www.facebook.com/media/set/?set=a.1002933559771598.1073742030.363762413688719&type=3
You can use PHP to JSON-format the data from Facebook. jQuery or JavaScript can render the photos to a webpage based on this JSON data. This tutorial is a good starting point https://www.codeofaninja.com/2011/06/display-facebook-photos-to-your-website.html
If you are doing this for a client or a business website, you can ask your client to use website plugins such as https://www.displaysocialmedia.com/embed-show-display-facebook-photo-album-on-website/
This doesn't work anymore. Anyone update it?
Nice -- glad you got something workable.