jquery - 防止 photoswipe 隐藏工具栏

Question

我正在使用带有 jQ​​ueryMobile 1.1-rc1 的 PhotoSwipe 3.0.4。

我试图阻止 PhotoSwipe 隐藏它的工具栏。

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

我还将captionAndToolbarHide设置为 false 希望这会阻止它隐藏，但这没有帮助。

当用户点击和滑动图像时，我想防止工具栏隐藏，因为在某些手机上，让工具栏再次显示有点困难。

有没有人有这方面的运气？

Answer 1

通过浏览这里的源代码，似乎有一些可能的选择。

1. 覆盖toolbar.class.js中的 OnFadeout 或淡出功能，使其不会根据您设置的设置淡出工具栏。特别是通过在以下行周围添加基于 if 语句的设置。

2. 为 OnBeforeJide 或 OnHide 事件覆盖或添加额外的事件侦听器，以取消隐藏或停止工具栏的隐藏。

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

3. 将自定义事件处理程序添加到 OnHide 或 OnBeforeHide 事件，这些事件继承自默认事件，但会根据您设置的设置停止隐藏工具栏。

从我所看到的

• 该captionAndToolbarHide变量默认为 false，当设置为 true 时，将阻止 Toolbar 在 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

I'm using photoswipe in slideshow only mode, the photos are loaded via ajax call. I wanted the caption permanently affixed to the bottom of the slideshow. This is what I've come up with. Pay attention to the last two lines:

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

This forces the caption to display and then overwrites the toggle function with nothing. I have had no errors with this solution.

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