Предотвращение скрытия фотопленки на панели инструментов

Question

Я использую PhotoSwipe 3.0.4 с jQueryMobile 1.1-rc1.

Я пытаюсь предотвратить скрытие PhotoSwipe своей панели инструментов.

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

Я также установил для captionAndToolbarHide значение false, надеясь, что это предотвратит его скрытие, но это не помогло.

Я бы хотел, чтобы панель инструментов не скрывалась, когда пользователь нажимает и проводит пальцем по изображениям, поскольку на некоторых телефонах немного трудно заставить панель инструментов отображаться снова.

Кому-нибудь повезло с этим?

Answer 1

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

1. Переопределите функцию OnFadeout или fadeout в toolbar.class.js , чтобы она не затухала на панели инструментов в зависимости от заданного вами параметра. В частности, путем добавления настроек на основе оператора if вокруг следующей строки .

2. Переопределить или добавить дополнительные прослушиватели событий к событиям OnBeforeJide или OnHide, чтобы отобразить или остановить скрытие панели инструментов.

   Пример пользовательского списка событий см. здесь или полностью удалите событие OnHide, вызвав Util.Events.remove(this.toolbar,Toolbar.EventTypes.onHide, this.toolbarHideHandler); вне метода удаления PhotoSwipe.

3. Добавить пользовательский обработчик событий в события OnHide или OnBeforeHide, который наследует от стандартного, но останавливает скрытие панели инструментов на основе заданного вами параметра.

Из того, что я вижу

• переменная captionAndToolbarHide по умолчанию имеет значение false, а при значении true предотвращает создание панели инструментов в функции CreateComponents.
• переменная captionAndToolbarAutoHideDelay делает то, что говорит, но предотвращает только автоматическое скрытие заголовка и панели инструментов, но не любые другие вызовы событий OnHide.
• переменная preventHide запрещает пользователю закрывать photoSwipe, но не обязательно гарантирует, что панель инструментов не будет скрыта.

Доступна дополнительная документация PhoneSwipe здесь .

Answer 2

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

.ps-caption{
opacity:0.8 !important;
display:block !important;
}

Answer 3

Вам нужны оба этих тега в вашем css:

.ps-caption{
opacity:0.8 !important;
}

.ps-toolbar {
opacity:0.8 !important;
}

Answer 4

Чтобы все время отображать панель инструментов и удалять надписи над сценарием в следующем порядке:

this.caption.fadeOut(); 
this.toolbar.fadeOut(); 

, затем

this.captionAndToolbar.fadeOut() 

Осторожно, есть две попытки, одна за другойзнать есть что.Внимание изменить ссылку на сайт.Минуты большую часть времени.

Answer 5

Я использую photoswipe в режиме только слайд-шоу, фотографии загружаются с помощью ajax call. Я хотел, чтобы надпись была прикреплена к нижней части слайд-шоу. Это то, что я придумал. Обратите внимание на две последние строки:

  instance.toolbar.showCaption();
  instance.toggleToolbar = function() {};

Это заставляет заголовок отображаться, а затем перезаписывает функцию переключения ни с чем. У меня не было ошибок с этим решением.

loadSlideshow = function(items){


 var options = {
    captionAndToolbarOpacity: 0.9,
    captionAndToolbarFlipPosition: true,
    captionAndToolbarAutoHideDelay: 0,
    captionAndToolbarShowEmptyCaptions: true,
    preventHide: false,
    enableKeyboard: false,
    autoStartSlideshow: true,
    target: $('#PhotoSwipeTarget'),
    imageScaleMethod: 'fit',
    preventHide: true,
    margin: 0,
    allowUserZoom: false,
    backButtonHideEnabled: false,
    //captionAndToolbarHide: true,
    getImageSource: function(obj){
      return obj.url;
    },
    getImageCaption: function(obj){
      return obj.caption;
    }
  };

  instance = window.Code.PhotoSwipe.attach(
    items, options 
  );

  instance.show(0);
  instance.toolbar.showCaption();
  instance.toggleToolbar = function() {};                           
  return true;
}

Answer 6

Добавьте следующую строку кода для постоянного отображения панели инструментов

.ps-toolbar{
    opacity:0.8 !important;
}