Подгрузить список данных через AJAX в fancybox
 

Всем привет!
На офиц. сайте fancybox есть пример отображения фото при клике на ссылку:

<p>
  <a id="test" href="javascript:;" class="btn btn-primary">Click me</a>
</p>

$("#test").on('click', function() {

  $.fancybox.open([
    {
      src  : 'https://source.unsplash.com/IvfoDk30JnI/1500x1000',
      opts : {
        caption : 'First caption',
        thumb   : 'https://source.unsplash.com/IvfoDk30JnI/240x160'
      }
    },
    {
      src  : 'https://source.unsplash.com/0JYgd2QuMfw/1500x1000',
      opts : {
        caption : 'Second caption',
        thumb   : 'https://source.unsplash.com/0JYgd2QuMfw/240x160'
      }
    }
  ], {
    loop : true,
    thumbs : {
      autoStart : true
    }
  });

});

Вопрос: как можно внутрь JS вставить данные, полученные функцией AJAX, интересуют эти строки:

src  : 'https://source.unsplash.com/IvfoDk30JnI/1500x1000',
      opts : {
        caption : 'First caption',
        thumb   : 'https://source.unsplash.com/IvfoDk30JnI/240x160'
      }

Т.е. я отправляю запрос скрипту, который формирует список и либо строкой, можно массивом получить это, потом в цикле перебрать, что-то типа:

$.fancybox.open([
тут перебор массива, который формирует данные
], {
    loop : true,
    thumbs : {
      autoStart : true
    }
  });

Получаю нужный массив, не могу реализовать его перебор правильно. Цикл FOR внутрь [] не получается вставить... Что-то запутался, как это сделать?

Я могу подгрузить миниатюрки в блок, потом при клике они увеличиваются, это не вопрос, а вот при клике по ссылке сразу увеличить и иметь возможность далее листать - не получается.

Буду благодарен за советы!

тут массив который был ранее сформирован.тут и надо рыть.

Не получается...

Если вставляю данные как html, то и получаю во всплывающем окне просто текст.

А как массив перебрать в этой конструкции правильно не пойму. Пробовал оставлять [], а внутри цикл FOR - не работает. Пробовал без [] - не работает. Пробовал всю конструкцию формировать в PHP и вставлять строкой - выходит строка.

Чёт голова не варит, не пойму, как подступиться.

Lion_astana,
информации недостаточно

Делаю запрос AJAX, тип данных json. Получаю ответ. Например переменная data. В ней массив из строк: https://source.unsplash.com/IvfoDk30JnI/1500x1000, https://source.unsplash.com/0JYgd2QuMfw/1500x1000 и т.д.

В исходном примере опустим пока в JS:

opts : {
        caption : 'First caption',
        thumb   : 'https://source.unsplash.com/IvfoDk30JnI/240x160'
      }

Оставляем только src, так проще.

Должно получиться так:

$.fancybox.open([
    {
      src  : 'https://source.unsplash.com/IvfoDk30JnI/1500x1000'
    },
    {
      src  : 'https://source.unsplash.com/0JYgd2QuMfw/1500x1000'
    }
  ], {
    loop : true,
    thumbs : {
      autoStart : true
    }
  });

Теперь вместо этих строк, прописанных изначально:

{
      src  : 'https://source.unsplash.com/IvfoDk30JnI/1500x1000'
    },
    {
      src  : 'https://source.unsplash.com/0JYgd2QuMfw/1500x1000'
    }

Нужно перебрать мой массив data, полученный ранее.

Если делаю просто [data], то во всплывающем окне выходит [src : https://source.unsplash.com/IvfoDk30JnI/1500x1000,src : https://source.unsplash.com/0JYgd2QuMfw/1500x1000]

Если делаю без квадратных скобок, то во всплывающем окне выходит первый слайд, но вместо фото - строка в центре экрана: https://source.unsplash.com/IvfoDk30JnI/1500x1000, листаю далее - следующий слайд, но по центру адрес второго фото: https://source.unsplash.com/0JYgd2QuMfw/1500x1000

Т.е. все как надо, только вместо фото - их адрес.

Lion_astana,

$(function() {
  var opt = {success:function(data) {
    data = data.map(function(src) {
      return {src:src};
    });
    $("#test").on("click", function() {
      $.fancybox.open(data, {loop:true, thumbs:{autoStart:true}});
    });
  }};
  AJAX(opt);
});

Спасибо, то что нужно!!!!
РАБОТАЕТ!!!!!!!!!!!

Супер, а как можно передать теперь и другие поля и как их правильно вытащить?

{
      src  : 'https://source.unsplash.com/IvfoDk30JnI/1500x1000',
      opts : {
        caption : 'First caption'
      }
}

Нужен массив из массивов, в которых две ячейки: первая - https://source.unsplash.com/IvfoDk30JnI/1500x1000, вторая ячейка - First caption.

Получается, если мысли верные, массив приходит такой:

data[0][[0]='https://source.unsplash.com/IvfoDk30JnI/1500x1000',[1]='First caption']
data[1][[0]='https://source.unsplash.com/0JYgd2QuMfw/1500x1000',[1]='Second caption']

Как их теперь принять и спарсить в такой вид как в коде выше?

Все, разобрался, получилось!
Спасибо за все!