[Free Plugin] Wonderful Image Slider - UPDATE

Thanks @eren for your great work!

I had to use css to customize the progress bar color. Am I missing something in the customization ?

Thank you @stephane

We don’t support this feature yet, but noted!

1 Like

Hey @eren

I just pushed a little bit more the slider and I noticed an issue with the slider inside a repeating group :sweat_smile:

I just recorded a demo :

1 Like

Please review this post.

1 Like

Hello! We have great news!

We have defined the “ActiveIndex” state in the plugin so that you can see which slide you are on in your slider. This value will be updated as you switch between your slides. You can use your “ActiveIndex” value in workflows and condition tab!

Plugin Page

Editor

Don’t forget to upgrade the plugin to the latest version and restart the editor!

Best;
Eren

1 Like

Hey @eren,

I’ve been using your plugin for a while now and for the most part, it’s working really well but I was wondering if it were possible for it to resize images on the server before it pulls them in?

I currently have a slider which is only 300px wide, but it still loads the full sized image which might be 3000px wide. Native Bubble image elements pull a resized version of the image so the original source image is the same size as the element.

I have a repeating group of image sliders which might have up to 10 images each so there really is considerable page speed improvements if this is possible.

Let me know what you think!

1 Like

Thank you for the feedback @juicebox . I’m sorry, we can’t take care of it right away. We’re a little busy nowadays, so you can be sure we will look at what we can do in the future.

No worries @eren, an enhancement for another day!

1 Like

Hi @eren,

I have been using the image slider and I am running into a problem. My app is using bubble’s multifileuploader so that the users can upload up to 10 pictures at once. Once they uploaded it, it will be saved as a list of images and a list of files in a database. Now I am using the image slider on top of a repeating group and when I preview the page its not showing the pictures. I tried looking at the debugger and everything looked fine, but its not displaying the images from the list of images. in the database. The bigger box is the repeating group. The smaller box is the image slider.

Please advice

Hello @fylmvest

Two separate actions are required for Slider to show a new list without refreshing the page.

Remove all slider to clear the data source and add a list to add a new list.

Have you used these actions?

And if you are going to use it in an RG, I recommend reading this post.

Hello Bubblers!

A small gift to the community for the new year!

2 new features have been added and performance has been improved!

Images are now optimized as in the Bubble element. Thank you @juicebox for bringing this to our table.

New version on the left as you can see in Gif

pluginbuil

A Slide is Double Clicked (event )
Event triggered when any slide is double-clicked.

clickedindex

Clicked Index (state) feature added
Allows us to watch the index of the last double clicked slide.

Happy new year! :partying_face:

Best,
Eren
Kodsuz Team!

2 Likes

Hi @eren,

My app requires videos about (30 sec to 1 minute) to be posted on the home screen and these videos have to have to fill the entire phone screen. There are some plugins that allow you to do that but the problem with these plugins are that if you click them on the phone screen then they open up a separate video player. I wanted the video to play as it is because I want the users to interact with the controls on the phone screen while seeing the video that has filled the entire phone screen in the background. Its a little bit like the Tiktok home screen or instagram reels, where the video is playing in the background while the user can interact with the icons such as like, share and comment.

I was wondering if you can add this function to the video and image slider in your next update?

Also it would be great if the autoplay section (where it asks for ms) could have user input fill up the field.

-Fylmvest

Hi @fylmvest

This is not like a feature that can be directly added. It may still be a way to do something similar. I made a little demo, please check it out.

We took this into our notes.

Best,
Eren

Hi @eren,

This is not what I was looking for exactly, but I could work with this for now. I know you mentioned that the requested feature can’t be added directly. Is it because Javascript doesn’t have functionalities that allow you to build a TikTok style custom video player?

Also do you know of any other service that has created this particular future?

I could see the TikTok style custom video player feature gaining more demand in the future as many people are now using bubble to build and convert to native iOS and Android apps.

-Fylmvest

Hi @eren, thanks heaps for this - it definitely makes a difference. I see that you’ve automatically applied parameters to all images as opposed to using the native :processed with Imgix functionality within Bubble. Was there a reason this is the case?

The reason I ask is that it is currently taking very wide images and squishing them horizontally to fit within the slider. I’d need to use fit=crop (which is available natively in Bubble) instead of fit=max and sometimes I’d also like to use q=75 to improve image file sizes.

Just something else I also realised after upgrading, some of the images for the sliders won’t load at all - and when I try and open them in a new tab I get a 403 Forbidden. Any ideas off the top of your head?

Let me know what you think!

@fylmvest

I am sorry for my late answer.

Glad it works!

No, I did not want to say that. It’s a bit of a wrong sentence, I’m sorry.

We add new features to the plugin according to our own road map and feedback, and we try to do this as quickly as possible. However, it might make more sense to create a new plugin instead of adding the feature you mentioned.

I will try to make a comeback on this in the near future, but I am not making any promises.

Best,

Hi @juicebox

It was the shortest way to optimize images.

All right, got it. We have a plan to make these areas dynamic, I don’t think it will take long. It will create more flexibility. I’ll let you know when it’s finished.

Hmm, actually I don’t have a clear idea. We did not have such a problem. I use this plugin in my different applications, I did not have a problem, we did not encounter such a thing in the demo application, and there was no such feedback from other users.

Have you tried running your application in incognito mode?

Are those images displayed again when you downgrade the plugin to the old version?

Best,

Hi @eren,

Got it, thank you.

I can confirm that the issue persists in incognito mode but is resolved when I downgrade to the previous version. Please find below the exact same image;

Version 1.7.0: https://s3.amazonaws.com/appforest_uf/f1606288361969x494803862675972540/shakespear-te-haruhi-bay-campground2.jpg%3Fwidth%3D759%26height%3D416

Version 1.8.0: https://d1muf25xaso8hp.cloudfront.net/https%3A%2F%2Fs3.amazonaws.com%2Fappforest_uf%2Ff1606288361969x494803862675972540%2Fshakespear-te-haruhi-bay-campground2.jpg%3Fwidth%3D759%26height%3D416?w=580&h=400&auto=compress&dpr=2&fit=max

Native Bubble image element with Imgix: https://d1muf25xaso8hp.cloudfront.net/https%3A%2F%2Fs3.amazonaws.com%2Fappforest_uf%2Ff1606288361969x494803862675972540%2Fshakespear-te-haruhi-bay-campground2.jpg%253Fwidth%253D759%2526height%253D416?w=384&h=288&auto=compress&dpr=1&fit=crop&q=100

I can’t quite work out the difference between Version 1.8.0 (which isn’t working) and a native Bubble image element with Imgix (which is working).

1 Like

I look forward to the new plugin

-Fylmvest

1 Like

After more digging, I think you might need to encode the URL first before you send it to Imgix?

If you decode the URL from Version 1.8.0, you get this; https://d1muf25xaso8hp.cloudfront.net/https://s3.amazonaws.com/appforest_uf/f1606288361969x494803862675972540/shakespear-te-haruhi-bay-campground2.jpg?width=759&height=416?w=580&h=400&auto=compress&dpr=2&fit=max

Note that there are two ‘?’ in the URL.

The native Bubble image element when decoded; https://d1muf25xaso8hp.cloudfront.net/https://s3.amazonaws.com/appforest_uf/f1606288361969x494803862675972540/shakespear-te-haruhi-bay-campground2.jpg%3Fwidth%3D759%26height%3D416?w=384&h=288&auto=compress&dpr=1&fit=crop&q=100

This one only has one ‘?’ which is followed by only Imgix query parameters. Completely guessing here but is the only key difference I can find between the URL that works and the one that doesn’t.

Based on ‘?’ being in the file name of the S3 file, I have 563 images so far impacted which is far too many for me to manually fix - hoping that you’re able to find a solution!

1 Like