I have a set of radio buttons, all displayed as small selectable thumnails, as a part of Gravity Forms, working with Woocommerce.
I'm looking for a way, to trigger a larger image of these thumbnails in a HTML table/field, once they are selected.
Is that possible and what jquery scripts/code would do the trick.
Do you have your form online now so we can see what you mean? If you are using images for radio buttons now, you have likely already added HTML to the radio button label. You could add your lightbox tag and link there, if you wanted to open something in a lightbox. I'm not sure what it is you want to open and how it's associated with the radio button image.
The page is not operational yet, so nevermind how it looks. I'm still trying to make it function the way I think it should be.
I just removed the "maintainance mode" so you should be able to see it.
Go to:
http://gimmbrothers.dk/?product=test-produkt-7
You will see a lot of buttons, 1,2,3,4,5 etc.
Each of them is a selection, a costumer can make, and when it is selected, together with the other options, it should appear in the Shopping Cart.
When a costumer selects a button/color/image, I would like a large Image (higher resolution of the selected button), to appear in a box (table in HTML or so?!?) just above the buttons.
I want something like this:
Go to ->
http://www.suitopia.com/en/products/suit/
...and choose "2. Fabric" on the left, just below "1. Product"
Everytime you select a button, the image above the button changes, and it is possible to view the image in an even bigger scale.
I really would love to do the same, but I'm not sure how...
I see how the suitopia page works. You will need to use jQuery and change the image up top when a radio button selection is made.
Here is one discussion of changing a background image in a page when a radio button is selected. http://stackoverflow.com/q/12152975 You can use the same approach, whether it is an image in a div or the background image of the page.
Thanks, I'll give it a try. Just to be clear (I'm a newbee) where do I put in the code, and will it be affected when a update is made to the theme?
JavaScript code will almost always be added to the header of your page.
http://www.gravityhelp.com/documentation/page/Where_Do_I_Put_This_Code%3F
If you are using a child theme, it will not be affected by an update. If you are modifying a theme, and a theme update is released, you could lose your changes. You should almost always use a child theme so you don't lose your customizations.
