Как добавить скролл в FancyBox?

Как можно настроить параметры в fancyBox, чтобы при открытии изображений на весь экран скролл на странице не исчезал?
  • 29 марта 2024 г. 9:09
Ответы на вопрос 1
Чтобы добавить скролл в FancyBox, нужно установить параметр `overflow` в значении `auto` или `scroll`. 

Пример кода:

```javascript
$.fancybox.open({
  src: 'image.jpg',
  type: 'image',
  opts : {
    toolbar  : false,
    touch    : false,
    arrows   : false,
    infobar  : false,
    smallBtn : false,
    lang     : 'ru',
    i18n : {
      'ru' : {
        CLOSE       : 'Закрыть',
        NEXT        : 'Вперед',
        PREV        : 'Назад'
      }
    },
    thumbs: {
      autoStart: true,  // Начнется ли FancyBox показывать миниатюры изображений при первой загрузке
      axis: 'y'  // Вертикальный или горизонтальный ряд (x || y)
    },
    clickContent: function(current, event) {
      var currentOpts = current.opts;

      if (current.group.length > 1 && current.index===current.group.length-1)
      {
        $.fancybox.close(true);
      } else {
        $.fancybox.next( event );
      }

      return currentOpts['clickContent'];
    },
    clickSlide: function(current, event) {
      var currentOpts = current.opts;

      if (current.group.length > 1 && current.index===current.group.length-1)
      {
        $.fancybox.close(true);
      } else {
        $.fancybox.next( event );
      }

      return currentOpts['clickSlide'];
    },
    slideShow : {
      autoStart : true,
      speed     : 2000
    },
    afterLoad : function(instance, slide) {
      for(var i = 0; i < slide.opts.$orig.length; i++)
      {
        if (slide.opts.$orig[i].attr('title') && !$(instance.$refs.stage).children('.fancybox-image-button--info').length )
        {
          $('<button data-fancybox-image-button--info></button>').appendTo(instance.$refs.stage)
            .on('click touchstart', function(e){
              e.stopPropagation();
              instance.$refs.caption.toggleClass('hideInfo');
            });
        }
      }
    },
    beforeClose : function(instance, current) {
      if ( current.opts.$orig.is('[data-fancybox-close]') )
      {
        instance.close()
      }
      if ($(instance.$refs.caption).hasClass('hideInfo'))
      {
        $(instance.$refs.caption).removeClass('hideInfo');
      }
    },
    clickOutside : 'close',  // Установка для закрытия галереи при нажатии за пределы контента 
    baseClass: 'fancybox-custom--single',  //    	
    backFocus : false,
    autoFocus: true,
    animationDuration: 366,
    baseTpl:
       '<div class="fancybox-custom--slide">\
        <div class="fancybox-bg fancyboxbg"></div>\
        <div class="fancybox-inner">\
            <div class="fancybox-toolbar fancyBox--toolbar">\
                <div class="fancybox-infobar">\
                    <span data-fancybox-index></span>&nbsp;/&nbsp;<span data-fancybox-count></span>\
                </div>\
            </div>\
            <button data-fancybox-navigation="button" data-fancybox-close class="fancybox-button"><i class="icon icon-cross"></i></button>\
            <button data-fancybox-navigation="button" data-fancybox-close class="fancybox-button"><i class="icon icon-cross"></i></button><div class="fancybox-outer">\
                <div class="fancybox-stage"><div class="fancybox-caption"></div></div>\
            </div>\
        </div>\
    </div>',
    fullScreen : {
       autoStart :  false
    },
    scrolling : 'auto',
    touch : {
       vertical: false, // Allow to drag content vertically
       momentum: false  // Continue movement after releasing mouse/touch when panning
    }   
  }
});
```
Похожие вопросы