CSS: Option to make the image bigger when clicked

i'm using the Image Slider widget on my form

what i would like to do is click on the images in the slider so they can be bigger

is there a way to do that, with that widget or an alternate one?

this is my form: https://form.jotform.com/251810986764165

thank you!

Rachel

Hi Rachel,

Thanks for reaching out to Jotform Support. I'm an AI assistant. I'll do my best to help you until someone from the support team is available.

The Image Slider widget in Jotform does not have a built-in feature to click and enlarge images directly. However, you can consider using the Image Gallery widget as an alternative, which allows users to view larger versions of images when clicked.

Here’s how to switch to or add the Image Gallery widget:

1. Go to your Form Builder.
2. Open the Widgets panel and search for "Image Gallery."
3. Add the Image Gallery widget to your form and upload your images.

This widget provides a better experience for users wanting to see bigger images by clicking on thumbnails.

Give it a try and let us know how it goes.

that did not work, but i'll stick with the slider for now unless a real person has a better idea

Hi Rachel,

The Image Slider widget doesn’t support enlarging images on click. Unfortunately, there’s no built-in option for that in the slider itself. The Image Gallery widget is the closest alternative, but since it didn’t work for you, sticking with the slider is understandable.

If you want, I can check if there are any other options or workarounds for you.

Hi Rachel,

Unfortunately, there's no other widget that works like Image Slider Widget. But, we can use CSS code to make the Widget bigger. Let me show you how to do it:

1. In Form Builder, click on the Gear Icon of your Image Slider Widget.
2. Under General tab, set the Height to 800.
   
   

3. Next, we will now inject the CSS code, copy this code:

body.image-slider-widget {

  height: 750px !important;

}

4. In Form Builder, click on the Wand Icon of your Image Slider Widget

5. Select Custom CSS tab and inject the CSS Code.

Check out the result:

You can check out this Demo Form so you can try it by yourself. If you want to clone the form, you can check out this guide about How to Clone an Existing Form From a URL. We've got a guide about How to Inject CSS Codes to Widgets that will help you do it. 

Give it a try and let us know how it goes.

Hi Cami

This looks MUCH better on a desktop, but on the phone there is a lot of extra white space above / below the slider. How can I fix that?

thank you!!!

RAchel

Hi Rachel,

We’ll need a bit of time to look into this. We'll get back to you as soon as we can.

We appreciate your patience and understanding in this.

Hi Rachel,

There is two code that you have to added in different part of the form. Let me walk you through the steps:

Adding into Form Designer:

1. First, copy this code:

/* Make Image Slider mobile responsive - Ticket #28731241 */

@media screen and (max-width: 480px) {

    li#id_103 {

        height: 450px !important;

    }

}

/* Ends here */

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Adding into your widget:

1. First, copy this code:

/* Make Image Slider mobile responsive - Ticket #28731241 */

@media screen and (max-width: 480px) { 

.j-slider {

  height: 400px !important;

}

}

/* Ends here */

2. Open your form in Form Builder, scroll down, and select the widget you want to make the change.

3. Click on the Wand icon on the right side of the widget to open Widget Settings.

4. Under the Custom CSS tab, paste the code into the CSS Code box.

Here is what it will look like once the code is added:

Give it a try and let us know if you need more help.

i already updated the CSS for the widget - is this in ADDITION or INSTEAD.

also it was reported that when viewers are looking at the images using a phone, the arrow is blocking some of the text. anything i can do to fix this?

Hi Rachel,

The code can be added under the previous code. As for the arrow, unfortunately the arrows seems to be inside the image container. It isn't possible to bring it outside the image container.

Let us know if you need more help.