Jquery – Using fancybox with content from AJAX call

ajaxfancyboxjquery

Trying to get a fancybox popup with the content I'm loading from Facebook with an AJAX call. The problem is the link opens in a new window instead of the popup.

I'm making the bind in the success and I have a reference image in the same page that works with the script loaded from the successful grab of data from Facebook. It means that the script is working but the images still cant open up in fancybox, but I can't really figure out why they can't reach the script even in the success. What am I missing?

EDIT: I experimented some with alerts and saw that the alerts were popped before and after the script, but the images didn't appear on the site until the entire loop was done and the script didn't run after that. Guessing I need the bind on the .fancybox-thumb items after the images are loaded on the page for it to work. Tried the complete: function but it ran before images were loaded also.

EDIT 2 Turns out if I put "#" in the href tag instead of the link to Facebook, fancybox triggers but gives the "the content cannot be loaded" error message.

EDIT 3 Read up on fancybox and it says it supports asyncronus items added but i dont know why it still doesnt work

$(document).ready(function () {
    $(".fancybox-thumb").fancybox({
         helpers: {
         title: { type: 'inside' },
         buttons: {},
         type: 'iframe',
         thumbs: { width: 50, height: 50 },
         overlay: { locked: false }
         }
    });         
 });

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"));

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



HTML:

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

Best Answer

This is because url to your image doesn't contain an image file extension... Try forcing fancybox type to iframe like this...

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

UPDATE: Working example in code snippet

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);
  }
});
* {
  max-width: 100%;
}

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

.fancybox-thumb {
  display: block;
}
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Fancybox -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>

<!-- Fancybox Thumbs -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.js"></script>

<!-- HTML Starts Here -->
<div id="AlbumFeed"></div>

Thanks to @JFK for suggesting image type :)

Related Topic