Prevent photoswipe from ever hiding the toolbar

Question

I'm using PhotoSwipe 3.0.4 with jQueryMobile 1.1-rc1.

I'm trying to prevent PhotoSwipe from hiding it's toolbar.

I tried setting the captionAndToolbarAutoHideDelay paramater to 0 hoping this would prevent the toolbar from hiding but this just seems to prevent it from hiding automatically.

I also set the captionAndToolbarHide to false hoping this would prevent it from hiding but this didn't help.

I would like to prevent the toolbar from hiding when then user taps and swipes images, as on some handsets it is a little difficult to get the toolbar to show again.

Has anyone had any luck with this?

Answer 1

From browsing the source code here there appears to be a few possible options.

1. Override the OnFadeout or fadeout function in toolbar.class.js so that it doesn't fadeout the toolbar based on a setting you set. Specifically by adding a settings based if statement around the following line.

2. Override or add additional Event Listeners to the OnBeforeJide or OnHide events, to unhide or stop the hide of the toolbar.

   For an example of a custom event listner see here or outright remove the OnHide event by calling Util.Events.remove(this.toolbar,Toolbar.EventTypes.onHide, this.toolbarHideHandler);, outside of the PhotoSwipe dispose method.

3. Add a custom event handler to OnHide or OnBeforeHide events that inherits from the default one but stops the hiding of the toolbar based on a setting you set.

From what I can see

• the captionAndToolbarHide variable is false by default, and when set to true prevents the Toolbar from ever being created in the CreateComponents function.
• the captionAndToolbarAutoHideDelay variable does that it says but that only prevents the automatic hiding of the caption and toolbar , but not any other event calls to OnHide.
• the preventHide variable prevents the user from closing photoSwipe but doesn't necessarily guarantee that the toolbar won't be hidden.

Further PhoneSwipe documentation is avaliable here.

Answer 2

I needed to prevent PhotoSwipe from hiding image captions, but still let it hide toolbar at the bottom of the page as normal. I simply addd the following css to override inline styles that PhotoSwipe applies to hide this element. You can use a similar way to prevent hiding the toolbar too.

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

Answer 3

You need both of these tags in your css:

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

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