Image slider problem

I have two forms that use some image slider widget (forgot the name of the widget) that the problem is, when you browse to the page, for a second or two, the images are hidden to the left and then jump to the center. If someone is browsing on a slow computer or cellphone, they might not know to wait and think it's an empty page. Why is this happening?

Here are the two forms:

http://www.vinewoodstudios.com/terms-conditions.html

http://www.vinewoodstudios.com/prices.html

Thank you.

Hi,

when you browse to the page, for a second or two, the images are hidden to the left and then jump to the center.

It looked OK for me, but I did see a blank form for maybe a second while it was loading. The reason why they are on the left is because the javascript code for slider was not yet active to place it in the center. As soon as it is loaded, it will however add it to center.

If someone is browsing on a slow computer or cellphone, they might not know to wait and think it's an empty page. Why is this happening?

Each image in your slider is quite big (900x1273) so they take some time to be loaded, depending on the speed of the connection. I see that you are using swipeGallery widget and what you can do is add a small loading image on your jotform and add CSS to show it under the swipeGallery.

This would then show you the loader for a second or two (or more if needed) and show swipeGallery images right after it.

This is the sample CSS that could be used to achieve that:

.form-section .form-line:first-child
{
    float: left;
    margin-bottom: -80px;
    position: relative;
    top: 150px;
}

You can see it in action here: http://form.jotformpro.com/form/42624073068958

Now to get this jotform cloned to your account you can follow this tutorial How to Clone an Existing Form from a URL and you can see here how to add the CSS to your jotform How to Inject Custom CSS Codes

In order for CSS to work you should place the image widget right above the swipeGallery widget and add some loader to it, I have used a simple one, but you can use any that you prefer. The important thing is that the loader should be as small as possible so that it is loaded first.

Do let me know if this is what would work for you and if you have any other questions :)

Best Regards,
Ben

This actually worked! I think I'll just use yours but please let me understand what you did... There IS a wait image when I load the page but in the jotform builder, I don't see any image widgets. Where is it? I need to know how you created it so I can apply it to my second form that needs this. Thank you.

OK, I see it the source: src="//www.jotform.com/uploads/Ben/form_files/ajax-loader.gif but I don't use the source for my embed so how would I use this in a frame embedded form?

Ok, I found it... hiding under the main widget. Thank you!

Ok, still have a problem... I can't access the widget properties because it's behind the main widget. Stupid problem but how do I do it?

Ok, figured it out - if I temperately delete the CSS code, the image goes to the top. Thank you!

Hi,

OK, I am glad that you have asked and even more that you were able to find the way to resolve the issues and continue experimenting with the forms.

Now since someone else might be having the same issue I will list what I did and what should be done to make it running.

Step 1 - adding the image widget

- the image widget can be found on the left in the form tools menu and we should drag it right above the "swipeGallery" widget

Step 2 - adding the image to it

- Find the loader that you would like to use, that has small size so that it is easy to download (we do not want something big that would show after 2 seconds as it looses its purpose)

You can use the loader I did, just click on this link and you will open a new tab with the image shown. Then just save it to your PC and add to your widget (this way it does not get removed if I move or remove mine ;) )

Click Browse to find it, Upload File to upload it and Close to exit. You should now see it on your jotform.

Now it is positioned right above the swipeGallery widget where we want it.

Now, this is simple because we do not have the CSS code in injected in the form so it is easy to set and change, so this is the time to adjust your loader if you want to upload any other (just for easiness of it).

Now we will Inject Custom CSS Codes using this code:

.form-section .form-line:first-child
{
    float: left;
    margin-bottom: -80px;
    position: relative;
    top: 150px;
}

This will however hide the loader behind the swipeGallery widget. This means that it is located exactly where we want it, but to see it again later on (for example to change the loader) we would need to remove the CSS code from above using the same steps (I suggest copy pasting it to a simple text editor like notepad so it is easy to hide later on) and the image widget will be shown once again :)

There it is.

I am sorry ztwersky. I have added the image loader and then CSS as in these steps I just recreated and did not notice that it would be good to let you know how to change it.

I am however very happy to hear that it worked for your issue.

Best Regards,
Ben