JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://sachinchoolur.github.io/lightGallery/light-gallery/css/lightGallery.css">
<script src="http://sachinchoolur.github.io/lightGallery/light-gallery/js/lightGallery.min.js"></script>
<ul is="lightGallery" class="facebook-gallery gallery" data-id="409985069076957" data-limit="10"></ul>
CSS
.facebook-gallery{
list-style-image: none;
list-style-position: outside;
list-style-type: none;
padding-left: 0;
}
.facebook-gallery > li{
float:left;
cursor:pointer;
width:150px;
height:150px;
overflow:hidden;
margin: 0 15px 15px 0;
}
.facebook-gallery img{
max-width:100%;
height:auto;
}
JavaScript
var DEBUG = false;
function log(message) {
if (DEBUG) {
try {
console.log(message);
} catch (e) {
alert(e + '; ' + message)
}
}
}
/* Facebook photo gallery */
function initGallery() {
var gallery = $('.facebook-gallery');
if (gallery && gallery.length > 0) {
// load images
var album = gallery.data('id');
var limit = gallery.data('limit');
getFacebookPictures(album, limit, gallery);
}
}
// add pictures to gallery
function getFacebookPictures(album, limit, container) {
$.ajax({
url: 'https://graph.facebook.com/1645587079047469?fields=photos&access_token=EAACEdEose0cBABpAZAlk87hlMETBKp4j41cwrvAB7P8Q1bVkgBxtlfrZAEIzsDCLS4A1UtSddLoZArcCj1KkQt8opYIWJiwHoLQGzeORXibzZBeFnInHZCFkC2UXlLWNbOoek1u1l0AvGqtvQ07kndABrPgZBrZC0sJfRT7UxARpqwk10tc36d3MoQsDy7NzhIZD)',
dataType: 'jsonp',
success: function (graphData) {
$.each(graphData.photos.data, function (index, picture) {
createGalleryElement(container, picture);
});
$.getScript("http://sachinchoolur.github.io/lightGallery/light-gallery/js/lightGallery.min.js")
.done(function (script, textStatus) {
log(textStatus);
container.lightGallery({
mode: 'slide',
useCSS: true,
loop: true,
thumbnail: true,
caption: false,
desc: false,
controls: true,
mobileSrc: true
});
})
.fail(function (jqxhr, settings, exception) {
log("Gallery loading has failed: " + exception);
});
}
});
}
function createGalleryElement(container, picture) {
var index = picture.images.length;
var thumb = picture.images[index - 1]; // fetch...