Fully Responsive Image Popup - All Devices All Image Ratios

This is a pre-approval showcase of a building block template that is a must have for any app that takes image presentation seriously.

This template is meant solely for the purposes of showing an image slide show in a ‘popup’ element that takes up the full width and height of any device it is on.

Extremely easy to implement into existing projects. Template description has instructions for integration. Should take five minutes or less.

Here are some screen shots

Beach Sunset image is 1:1

Green Mountain image is 16:9

Black and White Female image is 3:4

Low Price of $9.99 saves you dozens of hours in development.

Check out the preview page:

Doesnt work, images not centered.

What device are you on?

Seems there is something off…checking on my iphone it doesn’t seem to work, but when using responsive dev tools in firefox it does.

Could be something with the plugin used to get page height. Will need to investigate.

Available now in the marketplace

It was a bit of pain but I fixed it up. Had to make several adjustments based around the quirky behavior of the iPhone and the scrolling causing a difference in height.

Please let me know if you experience any issues on other devices. One thing to note is iPhone 5 is not supported ATM but will work on a fix tomorrow for that if it is possible.

Otherwise newer iPhones should work. I did a test video on an iPhone X and it works well, even when in landscape and the page is loaded and prior to scroll (had to set up a workaround to make page black since it is not seemingly possible to stop that slight scroll that takes place when the top nav bar is removed)

1 Like

This looks promising. Does this also handle displaying both high resolution and low resolution images (say 200 x 200) in a visually pleasing way (i.e. not scaling up the low resolution images when viewed on desktop)?

It would be helpful if the template Preview include one or two lower resolution images or better yet, the ability to input an image and see how it displays.

This is possible through some customization, but the way the template was built it currently does not do that. It looks for the image ratio, not the size…if you wanted it to look at the size as well to decide if it should not expand to fill the screen as a full page image popup that would be possible.

1 Like

if you wanted it to look at the size as well to decide if it should not expand to fill the screen as a full page image popup that would be possible.

Thanks. I discovered this template because unfortunately, I’ve not had much success in finding a solution to conditionally decide the size an element based on the dimensions of an image resource (or based on any other conditions for that matter). If you know of any mechanism to conditionally set the width/height of a bubble Image or Popup based on the width and height of a dynamic image resource, I’d be grateful… as far as I can tell width/height are not changeable properties and also can’t be used as conditionals.

Do you have a way of knowing the width and height of the original image? That is the problem from my point of view as I don’t know of anyway to detect the original image width and height.

I don’t know of a way to get the width and height. That does indeed seem to be the missing piece of the puzzle.

Hi Boston,
Does this support videos? I am using this plugin for image/video slider and would need it to be compatible with this.

Wonderful Video & Image Slider Plugin | Bubble

Thank you!
Scott

The element that holds the image is a group and I don’t think that the group element can be used as a video player.

I suppose it might be possible to substitute the video player plugin for the group element but have never tested it.