- ahinch22Asked on July 08, 2013 at 11:06 AM
Is it possible to add an image slider/carousel? (like the one we all know from itunes/os x cover flow)
I'm trying to give users a way to preview images before selecting one without taking up a ton of real estate on my form. Using conditions to have images appear individually is my backup plan - but I'd like our users to be able to so scan all 24 images without clicking 24 times.
a) Has anyone done this?
b) Are a large % of people going to have difficulty viewing it? Or can it be done with fairly universal coding...
- JotForm SupportEltonCrisAnswered on July 08, 2013 at 12:33 PM
It can be done with extra coding. There are plenty of image slideshows around, yes jCarousel is a good one. We will try to provide you example so you can construct on your own. This requires using your form source code: How to get your Form Source Code and inject the jCarousel script. This may take a while before we can get back to you. You can also refer to jCarousel documentation for a better instruction. http://sorgalla.com/projects/jcarousel/
We will just update you here when it's ready. Thanks!
- ahinch22Answered on July 08, 2013 at 12:40 PM
Thank You very much. If it's too much trouble don't worry about it— chances are it'd be above my coding skill level. I've constructed a solution in the meantime and my conditions are not working the way I'm intending...
I'm trying to get it so that only one image shows at a time. In some cases it does, but not at first.
If you visit this form:
You'll see that a bunch of images appear at once, however— if you select an option (v4 for example) - the desired effect takes place. What condition(s) do I have to set so that image v1 is the only image displayed at first?
I've tried many combinations of conditions - as well as preselected options to hide the other 23 images - but I just cant get it to work.. any ideas?
- JotForm SupportEltonCrisAnswered on July 08, 2013 at 02:31 PM
Your form condition works fine here: http://form.jotform.us/form/31826399228161
It shows only 1 image everytime I load the form here. Here's my test: http://screencast.com/t/v5YlByWfYOu
I would suggest to try clearing your browsers cache and cookies and recheck again your form. That might help.
P.S. We can work on the script sample. We'll use your form as example so you will have it ready for embedding. We'll update you later.
- ahinch22Answered on July 08, 2013 at 02:43 PM
That'd be awesome! Thanks again
- JotForm SupportEltonCrisAnswered on July 09, 2013 at 09:56 AM
Ok, here's what you need to do.
1. Clone this form: http://form.jotformpro.com/form/31893408704963?
I have cloned your original form here and made some changes on the conditions so I can easily apply the jCarousel without affecting other field conditions.
2. Download this jCarousel Form Files here: https://shots.jotform.com/elton/form_jcarousel/jcarousel%20form.zip. Everything here is ready, you can check that in form.html. What you just need to do is to replace the formID on the form.html source code. To do that, follow these steps:
a. Open the form.html into notepad or any other html editing tools you have,
b. Press Ctrl+H (shortcut for Replace) find 31893408704963 and replace it with your cloned formID.
3. Save it and preview the form.html. You can also copy it's source code and embed it to your page. Make sure the js and skins folders are included/uploaded in your server.
- ahinch22Answered on July 11, 2013 at 09:36 AM
I think I've followed most of the steps correctly— and I'm probably overlooking an obvious answer to this next one... but how do I upload the adjusted source code to my cloned jotform?
- JotForm SupportWelvinAnswered on July 11, 2013 at 11:50 AM
You don't have to upload back the modified source codes to Jotform Builder - that is not possible. You'll have to embed the modified source codes to your website. Used the modified form source codes and paste it to your website HTML Editor.