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?

score 8 · Accepted Answer · answered Mar 31 '12 at 11:23

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

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.
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.
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.

ivanb · Answer 2 · 2012-04-30T14:50:38.067

6

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

edited Apr 30 '12 at 14:50

answered Apr 30 '12 at 13:09

ivanb

151
5

You have to set the opacity to 1 !important for the toolbar and the image caption. – andi1984 May 29 '12 at 11:50

score 3 · Answer 3 · answered Apr 24 '13 at 18:54

3

You need both of these tags in your css:

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

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

answered Apr 24 '13 at 18:54

user1328229

171
1
1
7

score 1 · Answer 4 · edited Feb 01 '14 at 20:43

1

To display all the time the toolbar and remove those caption above the script in order first:

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

then

this.captionAndToolbar.fadeOut()

Careful, there are two try one then the other to know is which. Attention modify the link to the site. Minutes most of the time.

edited Feb 01 '14 at 20:43

Fractaliste

5,777
11
42
86

answered Feb 01 '14 at 20:19

Spawn_725

11
1

score 0 · Answer 5 · answered Aug 01 '13 at 22:31

I'm using photoswipe in slideshow only mode, the photos are loaded via ajax call. I wanted the caption permanently affixed to the bottom of the slideshow. This is what I've come up with. Pay attention to the last two lines:

  instance.toolbar.showCaption();
  instance.toggleToolbar = function() {};

This forces the caption to display and then overwrites the toggle function with nothing. I have had no errors with this solution.

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

Would you mind sharing the format of the contents of the items var you are passing as the first param into the attach function? I'm trying to do something similar. — Jonathan Stark, Dec 06 '13 at 22:31

score -1 · Answer 6 · answered Jan 11 '13 at 05:06

-1

Add the following line of code to display toolbar permanently

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

answered Jan 11 '13 at 05:06

Yaro Oruvan

1

Prevent photoswipe from ever hiding the toolbar

6 Answers6