Im creating theme for wordpress and i need to have selectbox where i can click and display images to select.
Currently for that function i have select dropdown list with text.
<select id='selectbox'>
<option >Airplane</option>
<option >Bowling</option>
<option >Alarm</option>
</select>
But i need to have some kind of select list with images and no text.
Is it possible to do something like that ? i assume that it would include jquery into work. But im unable to find any answers on the net.
Ok i have spent whole day to make it work but i guess im too stupid. On every possible example and solution i have some problems with making it work.
Here is entire code of metabox i use http://pastebin.com/1kvYz8Mg it’s for wordpress theme and everything else works as i needed, only thing that i can’t get it is if i could replace select box to some kind of images list to select proper image for a field.
Try this:
jQuery:
html:
I would probably use a RADIO button list and have the images inside of LABEL tags attached to each RADIO INPUT.
Here’s a simple jsfiddle to demonstrate.
http://jsfiddle.net/TnFma/
Here’s a try with almost pure CSS.
It uses radios to store the selected value (
$_POST['thing']
), which are wrapped in associated labels. Controlling the visibility of the images on clicks is a little tricky though. Using links and the:target
you can make all the images show up when the “select” is clicked, but you still need a way to hide other images when a selection is made. That’s why I had to add theonclick
attribute on the labels to remove the#select
hash. If anyone knows a way to hide it with CSS, I’d love to hear it 🙂Using jQuery this is pretty easy to implement. Assuming you have DIV with images inside and a hidden input field:
The input field (
thing
) will store the index of the image…(fiddle)
To do this, you’d need to have your corresponding images be in their own separate “div” blocks, where each div is set to display:none.
E.g.
Then you’d need to add a onchange event handler to your select to make the images display as a block. E.g.
Then, add jquery to your , and you’re done. Now you can change the select dropdown and the image that’s displayed will change as well.
NOTE: wrote this without trying it out, may have a semicolon error somewhere, who knows.
I suppose you are looking for something like this: Javascript image dropdown 2.0
this example is using PHP and from a database it pulls the value 0 to 3 and sets image opacity and select box value as follows:
javascript
php
there will be better ways to do this im sure but it works