JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.js"></script>
<!-- https://stackoverflow.com/questions/37808029/using-fancybox-with-content-from-ajax-call -->

<div id="AlbumFeed"></div>

CSS

* {
  max-width: 100%;
}

.facebookimage {
  display: inline-block;
  width: 30%;
}

.fancybox-thumb {
  display: block;
}

JavaScript

$(".fancybox-thumb").fancybox({
  type: 'image'
});

var accessToken = "XXX";
var postsURL = "https://graph.facebook.com/ALBUMID/photos/?fields=name,link&access_token=" + accessToken;

$.ajax({
  url: postsURL,
  method: 'GET',
  dataType: "jsonp",
  success: function(data) {
    for (var i = 0; i <= data.data.length - 1; i++) {
      var Description = ""

      if (data.data[i].name != null) {
        Description = data.data[i].name
      }

      var div = $("<div class='facebookimage'><a class='fancybox-thumb' href='https://graph.facebook.com/" + data.data[i].id.toString() + "/picture?type=normal" + "' rel='fancybox-thumb' title='" + Description + "'><img src='https://graph.facebook.com/" + data.data[i].id + "/picture?type=normal' /></a></div>");
      div.appendTo($("#AlbumFeed"));
    }
    $(".fancybox-thumb").fancybox({
      type: 'image',
      helpers: {
        title: {
          type: 'inside'
        },
        buttons: {},
        thumbs: {
          width: 50,
          height: 50
        },
        overlay: {
          locked: false
        },
      }
    });

  },
  error: function(status) {
    console.log("Facebook data could not be retrieved. Failed with a status of " + status);
  }
});