我正在使用PhotoSwipe 3.0.4与jQueryMobile 1.1-rc1。
我尝试防止PhotoSwipe隐藏其工具栏。
我尝试将captionAndToolbarAutoHideDelay参数设置为0,希望这可以防止工具栏隐藏,但这似乎只是防止它自动隐藏。
我还将captionAndToolbarHide设置为false,以防止它隐藏,但这没有帮助。
我希望当用户点击和滑动图片时,可以防止工具栏隐藏,在某些手机上,重新显示工具栏有点困难。
有人在这方面有什么好的经验吗?
我正在使用PhotoSwipe 3.0.4与jQueryMobile 1.1-rc1。
我尝试防止PhotoSwipe隐藏其工具栏。
我尝试将captionAndToolbarAutoHideDelay参数设置为0,希望这可以防止工具栏隐藏,但这似乎只是防止它自动隐藏。
我还将captionAndToolbarHide设置为false,以防止它隐藏,但这没有帮助。
我希望当用户点击和滑动图片时,可以防止工具栏隐藏,在某些手机上,重新显示工具栏有点困难。
有人在这方面有什么好的经验吗?
覆盖toolbar.class.js中的OnFadeout或fadeout函数,使其不根据您设置的设置淡化工具栏。具体来说,通过在以下行周围添加基于设置的if语句。
覆盖或添加其他事件侦听器到OnBeforeJide或OnHide事件,以取消隐藏或停止隐藏工具栏。
有关自定义事件列表的示例,请参见此处,
或通过在PhotoSwipe dispose方法之外调用Util.Events.remove(this.toolbar,Toolbar.EventTypes.onHide, this.toolbarHideHandler);
直接删除OnHide事件。
向OnHide或OnBeforeHide事件添加自定义事件处理程序,该事件处理程序继承默认事件处理程序,但基于您设置的设置停止隐藏工具栏。
据我所见
captionAndToolbarHide
变量默认为false,当设置为true时,在CreateComponents函数中永远不会创建工具栏。captionAndToolbarAutoHideDelay
变量确实可以做到这一点,但仅防止自动隐藏标题和工具栏,而不是任何其他调用OnHide的事件。preventHide
变量防止用户关闭photoSwipe,但并不保证工具栏不会被隐藏。更多PhoneSwipe文档请参见此处。
我需要防止PhotoSwipe隐藏图像标题,但仍然让它像正常情况下隐藏页面底部的工具栏。我只需添加以下CSS来覆盖PhotoSwipe应用于隐藏此元素的内联样式。您可以使用类似的方法来防止隐藏工具栏。
.ps-caption{
opacity:0.8 !important;
display:block !important;
}
You need both of these tags in your css:
.ps-caption{
opacity:0.8 !important;
}
.ps-toolbar {
opacity:0.8 !important;
}
this.caption.fadeOut();
this.toolbar.fadeOut();
然后
this.captionAndToolbar.fadeOut()
我正在使用仅幻灯片模式的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;
}
.ps-toolbar{
opacity:0.8 !important;
}