2012-01-30 2 views
0

Я использую fancybox для отображения галереи изображений. Но я хотел поставить интерактивную головоломку на последнем слайде. Головоломка работает, но когда я пытаюсь выбрать некоторые части головоломки справа или слева, навигационные кнопки появляются и перекрывают головоломку, заставляя меня либо перейти к предыдущему слайду, либо отбросить меня назад к началу.fancybox disable button on last gallery image

Вопрос: Как я могу использовать галерею изображений с функциями кнопок навигации, пока не дойду до последнего слайда? Я хочу отключить правую/левую стрелку и ее функциональность только на последнем слайде.
Возможно ли это?

 $(document).ready(function() { 

    $(".grouped").fancybox({ 

     openEffect    : 'none', 
     closeEffect    : 'none', 
     prevEffect    : 'none', 
     nextEffect    : 'none', 
     closeBtn    : false, 

     helpers : { 
      title : { 
       type : 'inside' 
      } 
     } 
     }); 

}); 

Мой класс для галереи

<a class="grouped" data-fancybox-group="button" href="../theme/images/questions_screen.jpg"> 

и класс для головоломки

<a class="grouped fancybox.iframe" data-fancybox-group="button" href="../theme/hidden_game/games"> 

ответ

0

когда вы достигаете на последнем кадре, вы можете скрыть предыдущий и следующий с css

.fancybox-prev, .fancybox-next добавить дисплей: нет; до уровня выше, когда вы достигаете последнего кадра.

+0

Я добавил .fancybox.iframe {.fancybox-пред, .fancybox-следующий дисплей: нет;} и это не сработало. Я делаю что-то неправильно? – need2nobasis

+0

Синтаксис неправильный, были ли вы его добавлением, вам нужно сделать это с помощью javascript, поставьте условие там, когда вы достигнете последнего кадра, добавьте этот стиль отображения: none; to .fancybox-prev и .fancybox-next –

0

вы можете отслеживать с помощью индекса

$('.fancy-el').fancybox({ 
     afterLoad: function(current) { 
      if (current.index === current.group.length - 1) { 
       current.arrows = false; 
      } 
     } 
}); 

http://jsfiddle.net/x03xqu7t/3/