Using fancybox with content from AJAX call

Question

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>

Your code (as of now) cannot really run. There missing things there. Post a complete code that shows your problem. — Dekel, Jun 16 '16 at 13:35
I described the problem. The fancybox doesn't trigger on images because the images load after the code for the fancybox is run. The code Im leaving out is an empty div and accesstoken/albumid. — Jimmy, Jun 17 '16 at 10:32
There are several locations that might cause you problems. If you want someone to help, it will be easier to see and debug a working code and not to start from scratch and guess what might be the problem. — Dekel, Jun 17 '16 at 20:36
Edited in some more code, see if you can get the same problem as me with it. — Jimmy, Jun 20 '16 at 07:57

score 3 · Accepted Answer · edited Jun 22 '16 at 08:31

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 :)

It didnt, the url gets replaced when visited but i see why this is a problem. But the main problem is still i think that it doesnt trigger when the images are loaded because this line of code isnt triggered either: thumbs: { width: 50, height: 50 }, — Jimmy, Jun 20 '16 at 07:49
You are correct when you say the issue is because the links don't have image file extension, however forcing the type to iframe is not the solution. Read this if that helps http://stackoverflow.com/a/17554660/1055987 Please note that is not the only issue, you still need to figure out the rest ;) — JFK, Jun 22 '16 at 02:08
You guys are correct. And thats why it worked on my static reference object. It has an image file extension. Good work! — Jimmy, Jun 22 '16 at 07:55

score 1 · Answer 2 · answered Jun 20 '16 at 21:46

I'm not sure where you got the config of the fancybox code there, but that is what caused you all the troubles.

fancybox constructor doesn't have helpers option, and you missed the type: 'iframe' there.

This is the new code that will work.

$(document).ready(function () {
  $(".fancybox-thumb").fancybox({
    type: 'iframe'
  }); 
});

var accessToken = "EAAWGDX5GyuwBAPokOnZBgTHZBwlIxZAVkw8cI2SD8SteVZBNmQ5EK9X2T7AWJpBs1ZAdbpLoL37IkT9yfyurooz5RygEp7ZBFF67MLLprxCy25wZBNSYh1HCKsx8Pgc0EAx7jmPzq7Yi4JNG1jEHR9mpHZCsZCxgcGoGAoNvX7tv6VwZDZD";
var postsURL = "https://graph.facebook.com/552189621541312/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);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>

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

`fancybox constructor doesn't have helpers` ... yes, it does, however the `type: 'iframe'` option doesn't go inside the helpers — JFK, Jun 21 '16 at 06:20
@JFK, you are right, I was looking at the docs of the old version (http://fancybox.net/api) instead of the new one (http://fancyapps.com/fancybox/#docs). I will update the answer accordingly. — Dekel, Jun 21 '16 at 12:37
@ShrameeSrivastav incorrect: `helpers` were introduced for version 2.x and don't (didn't and won't) exist for version(s) 1.3x — JFK, Jun 22 '16 at 01:46
@Dekel Almost, however forcing the type to iframe is not the solution. Read this if that helps http://stackoverflow.com/a/17554660/1055987 — JFK, Jun 22 '16 at 02:13

Using fancybox with content from AJAX call

2 Answers2