防止Photoswipe自动隐藏工具栏

Question

我正在使用PhotoSwipe 3.0.4与jQueryMobile 1.1-rc1。

我尝试防止PhotoSwipe隐藏其工具栏。

我尝试将captionAndToolbarAutoHideDelay参数设置为0，希望这可以防止工具栏隐藏，但这似乎只是防止它自动隐藏。

我还将captionAndToolbarHide设置为false，以防止它隐藏，但这没有帮助。

我希望当用户点击和滑动图片时，可以防止工具栏隐藏，在某些手机上，重新显示工具栏有点困难。

有人在这方面有什么好的经验吗？

- darryn.ten

Answer 1

从浏览源代码（此处）中，似乎有几个可能的选项。

1. 覆盖toolbar.class.js中的OnFadeout或fadeout函数，使其不根据您设置的设置淡化工具栏。具体来说，通过在以下行周围添加基于设置的if语句。

2. 覆盖或添加其他事件侦听器到OnBeforeJide或OnHide事件，以取消隐藏或停止隐藏工具栏。

   有关自定义事件列表的示例，请参见此处， 或通过在PhotoSwipe dispose方法之外调用Util.Events.remove(this.toolbar,Toolbar.EventTypes.onHide, this.toolbarHideHandler);直接删除OnHide事件。

3. 向OnHide或OnBeforeHide事件添加自定义事件处理程序，该事件处理程序继承默认事件处理程序，但基于您设置的设置停止隐藏工具栏。

据我所见

• captionAndToolbarHide变量默认为false，当设置为true时，在CreateComponents函数中永远不会创建工具栏。
• captionAndToolbarAutoHideDelay变量确实可以做到这一点，但仅防止自动隐藏标题和工具栏，而不是任何其他调用OnHide的事件。
• preventHide变量防止用户关闭photoSwipe，但并不保证工具栏不会被隐藏。

更多PhoneSwipe文档请参见此处。

- Appleman1234

Answer 2

我需要防止PhotoSwipe隐藏图像标题，但仍然让它像正常情况下隐藏页面底部的工具栏。我只需添加以下CSS来覆盖PhotoSwipe应用于隐藏此元素的内联样式。您可以使用类似的方法来防止隐藏工具栏。

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

- ivanb

---

你必须对工具栏和图片标题设置不透明度为1 !important。 - andi1984

Answer 3

You need both of these tags in your css:

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

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

- user1328229

Answer 4

为了始终显示工具栏并删除脚本上方的标题，需要进行以下操作：

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

然后

this.captionAndToolbar.fadeOut() 

小心，有两种尝试的方法，需要知道哪一个是正确的。 注意修改网站链接。大多数情况下只需要几分钟。

- Spawn_725

Answer 5

我正在使用仅幻灯片模式的photoswipe，照片是通过ajax调用加载的。我希望标题永久固定在幻灯片底部。这就是我想出来的。请注意最后两行：

  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;
}

- philpro

---

你介意分享一下传递给attach函数作为第一个参数的items变量内容的格式吗？我正在尝试做类似的事情。 - Jonathan Stark

Answer 6

请添加以下代码行以永久显示工具栏：

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

- Yaro Oruvan