-
-
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> |
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?
@frye-guy what was the change FB made?