Fancybox игнорирует опцию превью

Question

Я получил предварительный просмотр галереи из пяти миниатюр, в самой галерее еще больше фотографий. Чтобы не помещать все в мой код, я поместил их в массив.

Это мой HTML код:

<div id="start_slides">
    <a href="javascript:;"><img src="./thumb1.jpg" alt=""></a>
    <a href="javascript:;"><img src="./thumb2.jpg" alt=""></a>
    <a href="javascript:;"><img src="./thumb3.jpg" alt=""></a>
    <a href="javascript:;"><img src="./thumb4.jpg" alt=""></a>
    <a href="javascript:;"><img src="./thumb5.jpg" alt=""></a>
</div>

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

var $links = $("#start_slides a");

$links.on('click', function () {
    $.fancybox.open([
    { src: 'photo1.jpg', opts: { caption: 'First caption' } },
    { src: 'photo2.jpg', opts: { caption: 'Second caption' } },
    { src: 'photo3.jpg', opts: { caption: 'Third caption' } },
    { src: 'photo4.jpg', opts: { caption: 'Fourth caption' } },
    { src: 'photo5.jpg', opts: { caption: 'Fifth caption' } },
    { src: 'photo6.jpg', opts: { caption: 'Sixth caption' } },
    { src: 'photo7.jpg', opts: { caption: 'Seventh caption' } },
    { src: 'photo8.jpg', opts: { caption: 'Eigth caption' } }],
    {
        loop: true,
        thumbs: {
            autoStart: true,
            axis: "y"
        }
    }, $links.index(this)
    );
});

Почему это не работает, как я могу это исправить?

Answer 1

Янис ответ не работает, но помог мне найти решение. (Так или иначе, спасибо): -)

В настройках каждого изображения необходимо добавить большой палец.

  var $links = $("#start_slides a");

  $links.on('click', function () {
      $.fancybox.open([
      { src: 'photo1.jpg', opts: { caption: 'First caption', thumb: 'thumb1.jpg' } },
      { src: 'photo2.jpg', opts: { caption: 'Second caption', thumb: 'thumb2.jpg' } },
      { src: 'photo3.jpg', opts: { caption: 'Third caption', thumb: 'thumb3.jpg' } },
      { src: 'photo4.jpg', opts: { caption: 'Fourth caption', thumb: 'thumb4.jpg' } },
      { src: 'photo5.jpg', opts: { caption: 'Eigth caption', thumb: 'thumb5.jpg' } }],
      {
          loop: true,
          thumbs: {
              autoStart: true,
              axis: "y"
          }
      }, $links.index(this)
      );
  });

Answer 2

Вы не указали значение для миниатюры.

Замените

{ src: 'photo1.jpg', opts: { caption: 'First caption' } }

на

{ src: 'photo1.jpg', thumb: 'thumb1.jpg', opts: { caption: 'First caption' } }

и так далее для остальных предметов.