0

Hello,

Not really sure if this is the right place to post this to but I am pretty sure I need js to accomplish this. I need to make a dropdown selection menu for my wordpress theme options, but I can't use the conventional <select> tag because I want my options to be a list of small images and this tag does not support it. (There were suggestions to use background-image but it didnt work in chrome). The problem is not making the list, I can do that, but I need it to work like a <select> tag. Meaning that the container element must have a 'name' value, cause wordpress needs this to save the settings in database. I hope I made myself clear enough.

An example what it could look like:

<ul id="infobox-img-dropdown-list" name="featured-infobox-1-img">
    <li value="phpWillFill"><img src="phpWillFillThis" /></li>
    <li value="phpWIllFill" class="selected"><img src="phpWillFillThis" /></li>
    <li value="phpWillFill" ><img src="phpWillFillThis" /></li>
</ul>

It's basically <select> but it shows images. I need it to function like <select> too.

For those who are familiar with wordpress, I am creating options page for my theme and am currently building the callback function for add_submenu_page() to display the settings form.

4
Contributors
4
Replies
25
Views
4 Years
Discussion Span
Last Post by almostbob
0

Well it is, but I need it to remember the choice and send it with other data when I submit the form.

0
<ul id="infobox-img-dropdown-list" name="featured-infobox-1-img">
    <li value="phpWillFill">
        <input type='radio' value='1' name='option' id='option1' />
            <label for="option1"><img src="phpWillFillThis" /></label>
     </li>
    <li value="phpWIllFill" class="selected">
        <inpu type='radio' value='2' name='option' id='option2' selected='selected'>
            <label for="option2"><img src="phpWillFillThis" /></label>
    </li>
    <li value="phpWillFill" >
        <input type='radio' value='3' name='option' id='option3'>
            <label for="option3"><img src="phpWillFillThis" /></label>
    </li>
</ul>

If you dont want the actual radio button do display just give it a css class that display: none,
and the image remains clickable
not very clean, but funcional

Edited by almostbob

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.