Css for pinch to zoom

Add-ons UIs
1

Does anybody know which styles I need to apply so that I can pinch to zoom images within an oh-image component?

2

I’ve never tried it, but I think what you’re looking for is this:

3

Thanks Justin,
I also came across this but it does not work.

Maybe the html meta tag prevents from doing that?

<meta name="viewport" content="... ,user-scalable=no, ...>
4

That seems like a likely culprit. From a quick test it looks to me like the other touch-action settings work, so this is probably where the interference is coming from.

I can see why scaling in general is disabled, but maybe if we call in @ysc he can tell you how to work around that.

5

Sorry I missed this, disabling scaling is a good thing, if you consider the UI as an “app”.

I’m not sure having areas you can pan & zoom on a page you can scroll is the best UI, for your use case I’d advise to have a look at the photos action combined with an oh-image-card:

component: oh-image-card
config:
  action: photos
  actionPhotoBrowserConfig:
    theme: dark
  actionPhotos:
    - caption: Camera 1
      item: WebcamSalon_MJPEGURL
    - caption: Random image
      url: https://source.unsplash.com/random
  item: WebcamSalon_MJPEGURL

This will open a full screen photo browser popup and you can pan & zoom in that popup.

2 Likes
6

Works like a charm.
Currently I have a comma-separated string of photo file names in an item. I was using f7-slider in combination with oh-repeater before.
As I cannot use oh-repeater here, is there another way to “convert” the string into the required format here?