Передача массива объектов изображения в Fancybox (лайтбокс) не работает? - PullRequest
Новая
       12

Передача массива объектов изображения в Fancybox (лайтбокс) не работает?

0 голосов
/ 02 января 2012

Я пытаюсь получить fancybox для отображения серии изображений в лайтбоксе.К сожалению, появляется только первое изображение.Насколько я могу судить по документам , я должен иметь возможность передавать массив объектов в fancybox и открывать их все.

Мой код приведен ниже (обратите внимание, что я перевелиз coffeescript из манжеты, поэтому могут возникнуть некоторые ошибки).

Когда я регистрирую массив images, он выглядит как совершенно нормальный массив объектов.Переход к URL-адресу для каждого изображения в браузере прекрасно отображает изображение, подтверждая, что URL-адреса действительны. 

$(function(){
  $('.lightbox').click(function(event){
    event.preventDefault();
    // need to be able to get the link target
    $link = $(event.target).closest('a');

    $.getJSON($link.attr('href'), function(cake){
      // map the json to an array that fancybox can use
      images = $(cake.images).map(function(key, image)){
        return({ href: image.url });
      });

      console.log(images);
      // => [{href: 'image1.jpg'},{href: 'image2.jpg'},{href: 'image3.jpg'}]

      // show the lightbox
      $.fancybox.open(images);
    });
  });
});

HTML (с добавленным рубином): 

<a href="<%= cake_path(cake) %>" class="lightbox">
  <%= cake.primary_thumbnail %>
  <h2>Chocolate Cake</h2>
</a>

OneДругой намек на то, что передача опции index: 2 в fancybox нарушает ее (это должно привести к открытию скрипта на третьем изображении в последовательности).Я получаю следующую ошибку: 

475Uncaught TypeError: Cannot read property 'nodeType' of null

Есть идеи?

Ответы [ 2 ]

1 голос
/ 03 января 2012

Правильный синтаксис должен быть: 

$.fancybox([ 
 {href : 'img1.jpg', title : 'Title'}, 
 {href : 'img2.jpg', title : 'Title'},
 {href : 'img3.jpg', title : 'Title'}  
 ],[
 {
 // API options here
 }
]);

, поэтому я предполагаю, что ваш конструктор должен возвращать каждый элемент массива, за которым следует запятая, кроме последней: 

{ href: image.url },

тогда, я думаю, выследует назвать fancybox как: 

$.fancybox.open([images]);
0 голосов
/ 03 января 2012

Я открыл проблему на Github , и мне сказали обновить ее до последней версии (которая новее, чем версия, доступная в настоящее время по ссылке для скачивания на сайте FancyBox).Проблема ушла, как только я это сделал.

...