防止photoswipe隐藏工具栏

时间:2012-03-26 17:23:51

标签: jquery jquery-mobile toolbar photoswipe

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

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

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

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

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

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

6 个答案:

答案 0 :(得分:8)

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

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

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

    有关自定义事件列表器的示例,请参阅here 或者在PhotoSwipe配置方法之外调用Util.Events.remove(this.toolbar,Toolbar.EventTypes.onHide, this.toolbarHideHandler);直接删除OnHide事件。

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

  4. 从我所看到的

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

    可提供更多PhoneSwipe文档here

答案 1 :(得分:6)

我需要阻止PhotoSwipe隐藏图片标题,但仍然让它隐藏在页面底部的工具栏照常。我只是添加以下css来覆盖PhotoSwipe应用于隐藏此元素的内联样式。您也可以使用类似的方法来防止隐藏工具栏。

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

答案 2 :(得分:3)

您需要在css中使用这两个标记:

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

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

答案 3 :(得分:1)

要始终显示工具栏,请先按顺序删除脚本上方的标题:

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

然后

this.captionAndToolbar.fadeOut() 

小心,有两个尝试一个然后另一个知道是哪个。 注意修改指向该站点的链接。分钟大部分时间。

答案 4 :(得分:0)

我在幻灯片播放模式下使用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;
}

答案 5 :(得分:-1)

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

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