Как я могу удалить FancyBox prev/play/next стрелки в навигационной панели вверху окна просмотра FancyBox?

Question

У меня есть миниатюры. Если вы нажмете на эти миниатюры, fancybox выйдет, чтобы показать большее изображение. В верхней части окна просмотра находится панель навигации со стрелками, которые позволяют вам перемещаться влево или вправо в галерее или воспроизводить видео, если миниатюром было видео. Я не хочу иметь эти кнопки в этой навигационной панели. Все, что я хочу, это кнопка изменения размера и кнопка выхода.

Я попробовал это в моем JS файл:

$(".fancybox:not(.video)").fancybox({ 
     helpers: { 
      buttons: { 
       arrows: false, 
      } 
     } 
    }); 

Я также попытался это как в других ответах:

$(".fancybox:not(.video)").fancybox({ 
     arrows : false, 
     helpers: { 
      buttons: {} 
     } 
    }); 

Я также попытался:

$(".fancybox:not(.video)").fancybox({ 
     helpers: { 
      buttons: {}, 
      arrows : false 
     } 
    }); 

Это не делает работать, и я был бы признателен за любую помощь.

Answer 1

Вы можете использовать опцию кнопки tpl, чтобы добавить/удалить нужные кнопки. Это шаблон по умолчанию:

tpl: '<div id="fancybox-buttons"><ul>' + 
    '<li><a class="btnPrev" title="Previous" href="javascript:;"></a></li>' + 
    '<li><a class="btnPlay" title="Start slideshow" href="javascript:;"></a></li>' + 
    '<li><a class="btnNext" title="Next" href="javascript:;"></a></li>' + 
    '<li><a class="btnToggle" title="Toggle size" href="javascript:;"></a></li>' + 
    '<li><a class="btnClose" title="Close" href="javascript:;"></a></li>' + 
    '</ul></div>' 

Отсюда вы можете удалить кнопки вы не хотите в пользовательском сценарии как:

jQuery(document).ready(function ($) { 
    $(".fancybox").fancybox({ 
     // API options 
     helpers: { 
      buttons: { 
       tpl: '<div id="fancybox-buttons"><ul>' + 
        '<li><a class="btnToggle" title="Toggle size" href="javascript:;"></a></li>' + 
        '<li><a class="btnClose" title="Close" href="javascript:;"></a></li>' + 
        '</ul></div>' 
      } 
     } 
    }); // fancybox 
}); // ready 

Кроме того, вам может потребоваться настроить width в FancyBox с тех пор, как вы удаляете некоторые из них. Вы можете добавить это правило CSS:

#fancybox-buttons ul { 
    /* 166 for 4 buttons */ 
    width: 86px !important; 
} 

... который будет соответствовать для 2-х кнопок левого (настройки по вашему усмотрению)

ПРИМЕЧАНИЕ: Кнопка play является не играть видео, но начать/приостановить галерею элементов fancybox (если есть)