Question

我正在使用带有jQueryMobile 1.1-rc1的PhotoSwipe 3.0.4。

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

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

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

我希望在用户点击和滑动图像时阻止工具栏隐藏，就像在某些手机上一样，让工具栏再次显示有点困难。

有没有人对此有任何好运？

Answer 1

从浏览源代码here开始，似乎有一些可能的选择。

覆盖toolbar.class.js中的OnFadeout或fadeout功能，使其不会根据您设置的设置淡出工具栏。特别是通过围绕以下line添加基于if语句的设置。
覆盖或向OnBeforeJide或OnHide事件添加其他事件侦听器，以取消隐藏或停止工具栏的隐藏。

有关自定义事件列表器的示例，请参阅here 或者在PhotoSwipe配置方法之外调用Util.Events.remove(this.toolbar,Toolbar.EventTypes.onHide, this.toolbarHideHandler);直接删除OnHide事件。
为OnHide或OnBeforeHide事件添加自定义事件处理程序，该事件继承自默认事件，但会根据您设置的设置停止隐藏工具栏。

从我所看到的

默认情况下captionAndToolbarHide变量为false，设置为true时，防止在CreateComponents函数中创建工具栏。
captionAndToolbarAutoHideDelay变量执行它所说的但只能阻止自动隐藏标题和工具栏，但不会阻止对OnHide的任何其他事件调用。
preventHide变量阻止用户关闭photoSwipe，但不一定保证不会隐藏工具栏。

可提供更多PhoneSwipe文档here。

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调用加载的。我希望标题永久地贴在幻灯片的底部。这就是我想出来的。注意最后两行：

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

防止photoswipe隐藏工具栏

6 个答案: