Single image viewer in a `dialog`

1

Hi @nolimits4web,

I have been struggling for several hours trying to make a dialog that shows an image to the user. I am using aurora theme on desktop. What I want to achieve is the dialog should be as big as possible (taking say 90% of the viewport), and be responsive for every screen size. Optionally, a button to close it would be nice. The image is available as a base64 encoded string, so I do not know the dimensions of the image. Can you please help? This would be useful to many people, I hope!

Thank you very much!

2

What is wrong with PhotoBrowser? It is indended to be used like that

3

Thanks for your reply.

To be honest I hadn’t thought of that, but I just tested it. It is a bit too much for my use case, though.

standalone mode:
Is there any way to start with, and stay in, exposition mode?

popup mode:
Almost what I want, but I wanted it to be bigger.

Any ideas?

4

This seems to do most of the trick:

function _view_image(data) {
  app.photoBrowser.create({
    photos : ['data:image/*;base64, ' + data],
    type: 'popup',
    theme: 'dark',
    navbar: false,
    toolbar: false
  }).open();
}

and

:root {
  --f7-popup-tablet-width: 85%;
}

Thank you for your great work! Спасибо!

1 Like