Enlarging image on click in slideshow

samedgurses46 · 2020-11-02T18:13:33.225Z

I have the Bubble slideshow plugin. I was wondering if it is possible to make the image bigger when you click on it.

boston85719 · 2020-11-02T19:31:46.978Z

Many different ways to do it.

Better may be to create a full page popup element. Set the background style to none. Set the data type to image but leave datasource empty.

Add a full page image element in the popup. Make sure to check the box for keep elements proportions, so that it will resize according to the image element ratios both vertically and horizontally as page width decreases. Set data source to parent groups image.

When click on an image in the slideshow do workflow. Show popup then display data in popup being current cells image.

samedgurses46 · 2020-11-02T19:48:07.976Z

Hello @boston85719,

i have done what you said but probarly i do something wrong. I have a list of images so i do not know what to choose for the data to display:

image1291×571 41.2 KB

And when i click on the slideshow the pop up does not show up.

This is how my pop up looks like: ![image|690x428]

image1099×637 35.7 KB

image1181×659 38.2 KB

What do i wrong?

boston85719 · 2020-11-02T19:49:59.000Z

You had set the datasource of the popup

Matthew McGowan:

Set the data type to image but leave datasource empty.

Also, I think you are using a plugin called slideshow…I’m not sure how it functions I always create my own slideshows.

samedgurses46 · 2020-11-02T20:36:57.611Z

Yes i use the slideshow plugin of bubble, so i think this works a little different

samedgurses46 · 2020-11-09T18:14:00.592Z

Hello guys, still need help

boston85719 · 2020-11-09T18:30:40.428Z

There seems to be a bug with this slideshow plugin that doesn’t allow the workflow event of when this slideshow is clicked to actually be triggered.

I just submitted a bug report #11841

In the meantime you can follow my previous instructions. Put the datasource to be the slideshows current slide so that the image that is currently displayed in your slideshow is displayed in the popup image.

To open the popup you should put a group that is transparent to overlay the slideshow element, but not completely as you don’t want to take away the navigation (hopefully bubble would fix the plugin to allow the workflow event ‘slideshow is clicked’ so you don’t need to use the ‘workaround’ of a group overlay to trigger the popup to be displayed).

samedgurses46 · 2020-11-09T18:37:16.854Z

Hello @boston85719, i have setup the workflows as you said. But the problem is that when you click, the workflow does not get “activated”. I guess we just have to wait for a respond of bubble. Can you please let me know if there is any update?

boston85719 · 2020-11-09T19:10:22.808Z

you can try the workaround of putting an overlay group on top of the slideshow

boston85719 · 2020-11-10T05:43:54.506Z

Bubble support has acknowledge the bug

I was able to investigate this issue, observing that the slideshow element cannot be used in events triggering workflows. As such, I prepared an engineering ticket for the team and our engineers will look into this shortly.

boston85719 · 2020-11-12T20:34:48.148Z

@samedgurses46

Support just emailed me that they fixed the issue

Thank you for reporting this, it turns out that there was a bug with the click handler for the Slick Slideshow plugin, deployed and fixed.

BTW I just uploaded to the marketplace a template that is an image popup element that sets an image to be completed centered on any device while taking up as much a space as possible to maintain the image ratio. It really improves the look of enlarged images across all devices.

The full page popup also has a built in slideshow functionality.

Bubble

Fully Responsive Image Popup Template for Bubble

Fully Responsive Image Popup Template page on Bubble. Use this template to speed up your app development. Bubble lets you build web apps without any code.

system · 2021-01-11T18:13:35.478Z

This topic was automatically closed after 70 days. New replies are no longer allowed.