我正在使用带有jQueryMobile 1.1-rc1的PhotoSwipe 3.0.4。
我试图阻止PhotoSwipe隐藏它的工具栏。
我尝试将 captionAndToolbarAutoHideDelay 参数设置为0,希望这会阻止工具栏隐藏,但这似乎可以防止它自动隐藏。
我还将 captionAndToolbarHide 设置为false,希望这会阻止它隐藏但是这没有帮助。
我希望在用户点击和滑动图像时阻止工具栏隐藏,就像在某些手机上一样,让工具栏再次显示有点困难。
有没有人对此有任何好运?
答案 0 :(得分:8)
从浏览源代码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。
答案 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;
}