Image select box instead of text select?

2 Views

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.

Read More
<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.

Post Views: 2

Related posts

Leave a Reply

7 comments

  1. Try this:

    jQuery:

    $("#selectbox").change(function(){
    var selectedIndex = $("#selectbox")[0].selectedIndex;

    $('ul#images li').each(function(index) {
        if ( index === selectedIndex ) { $(this).show(); }
        else { $(this).hide(); }
    });
});

    html:

    <select id="selectbox">
    <option >Airplane</option>
    <option >Bowling</option>
    <option >Alarm</option>
</select>

<ul id="images">
    <li><img src="sample1.jpg" /></li>
    <li><img src="sample2.jpg" /></li>
    <li><img src="sample3.jpg" /></li>
</ul>

  2. 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/

    function createImageSelectList(id, name, arrOptions) {
    var $elm = $("#" + id);
    for(var x = 0; x<arrOptions.length; x++) {
        var opt = arrOptions[x];
        var subId = name + "_" + opt.value;
        var $rad = $("<input />");
        $rad.attr("type", "radio");
        $rad.attr("value", opt.value);
        $rad.attr("name", name);
        $rad.attr("id", subId);
        var $lbl = $("<label />");
        $lbl.attr("for", subId);
        $lbl.append($("<img />")
            .attr("src", $("#" + opt.image).attr("src")));
        $elm.append($lbl);
        $elm.append($rad);
    }
}

  3. 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 the onclick 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:

    $('.select').each(function(){
  var input = $('input', this),
      images = $('img', this),
      selecting = false;

  images.hide().click(function(){             

    // if the select box is open and a image was cliked
    if(selecting){
      input.val($(this).index() + 1);
      images.not(this).hide();

    // if select box is closed and the active image was clicked
    }else{     
      images.show();             
    }

    selecting = !selecting;

  }).eq(input.val() - 1).show();    

});

    The input field (thing) will store the index of the image…

    (fiddle)

  4. 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.

     <div id="0" style="display:block"><img src="your Airplane image path" /></div>
 <div id="1" style="display:none"><img src="your Bowling image path" /></div>
 <div id="2" style="display:none"><img src="your Alarm image path" /></div>

    Then you’d need to add a onchange event handler to your select to make the images display as a block. E.g.

     <script>
  function changeSelectBox() {
      $("#0,#1,#2").hide();

      $('#' + document.getElementById('selectbox').selectedIndex).show();
 }
 </script>

 <select id='selectbox' onchange="return changeSelectBox();">
     <option selected>Airplane</option>
     <option >Bowling</option>
     <option >Alarm</option>
 </select>

    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.

  6. 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

    <script type="text/javascript">
function ChangeLights(selector){
        if (selector == 0){
            document.getElementById("Light0").style.opacity = "1";
            document.getElementById("Light1").style.opacity = "0.2";
            document.getElementById("Light2").style.opacity = "0.2";
            document.getElementById("Light3").style.opacity = "0.2";
            document.getElementById('Run_Status').selectedIndex = 0;
        }
        if (selector == 1){
            document.getElementById("Light0").style.opacity = "0.2";
            document.getElementById("Light1").style.opacity = "1";
            document.getElementById("Light2").style.opacity = "0.2";
            document.getElementById("Light3").style.opacity = "0.2";
            document.getElementById('Run_Status').selectedIndex = 1;
        }
        if (selector == 2){
            document.getElementById("Light0").style.opacity = "0.2";
            document.getElementById("Light1").style.opacity = "0.2";
            document.getElementById("Light2").style.opacity = "1";
            document.getElementById("Light3").style.opacity = "0.2";
            document.getElementById('Run_Status').selectedIndex = 2;
        }
        if (selector == 3){
            document.getElementById("Light0").style.opacity = "0.2";
            document.getElementById("Light1").style.opacity = "0.2";
            document.getElementById("Light2").style.opacity = "0.2";
            document.getElementById("Light3").style.opacity = "1";
            document.getElementById('Run_Status').selectedIndex = 3;
        }
}
</script>

    php

    $Run_Number['Run_Status'] = 0;//test value
echo '    
<select name="Run_Status" id="Run_Status">
    <option value="0" '.($Run_Number['Run_Status'] == "0" ? "selected":"").'>Not Ready</option>
    <option value="1" '.($Run_Number['Run_Status'] == "1" ? "selected":"").'>Ready</option>
    <option value="2" '.($Run_Number['Run_Status'] == "2" ? "selected":"").'>In Transit</option>
    <option value="3" '.($Run_Number['Run_Status'] == "3" ? "selected":"").'>Delivered</option>
    </select>

    <img id="Light0" class="light" src="images/light-red.jpg" height="40" style="image-orientation: 90deg; opacity: '.($Run_Number['Run_Status'] == 0 ? '1':'.2').';" title="Not Ready" onclick="ChangeLights('0')">
    <img id="Light1" class="light" src="images/light-rey.jpg" height="40" style="image-orientation: 90deg; opacity: '.($Run_Number['Run_Status'] == 1 ? '1':'.2').';" title="Ready" onclick="ChangeLights('1')">
    <img id="Light2" class="light" src="images/light-yel.jpg" height="40" style="image-orientation: 90deg; opacity: '.($Run_Number['Run_Status'] == 2 ? '1':'.2').';" title="In Transit" onclick="ChangeLights('2')">
    <img id="Light3" class="light" src="images/light-gre.jpg" height="40" style="image-orientation: 90deg; opacity: '.($Run_Number['Run_Status'] == 3 ? '1':'.2').';" title="Delivered" onclick="ChangeLights('3')">
';

    there will be better ways to do this im sure but it works

  7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://thdoan.github.io/bootstrap-select/css/bootstrap-select.css">
<style>
body { margin:2em; }
pre { margin:1em 0; }
select.selectpicker { display:none; /* Prevent FOUC */}
</style>

<form>
<h2>Select with Thumbnails</h2>
  <select title="Select your surfboard" class="selectpicker">
    <option>Select...</option>
  <option data-thumbnail="https://avatars2.githubusercontent.com/u/7187348?v=3&s=40">Chrome</option>
  <option data-thumbnail="images/icon-firefox.png">Firefox</option>
  <option data-thumbnail="<?php echo base_url(); ?>assets/favicon.ico">IE</option>
  <option data-thumbnail="images/icon-opera.png">Opera</option>
  <option data-thumbnail="images/icon-safari.png">Safari</option>
  <option data-thumbnail="images/icon-chrome.png">Chrome</option>
    <option data-thumbnail="images/icon-firefox.png">Firefox</option>
    <option data-thumbnail="images/icon-ie.png">IE</option>
    <option data-thumbnail="images/icon-opera.png">Opera</option>
    <option data-thumbnail="images/icon-safari.png">Safari</option>
  </select>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://thdoan.github.io/bootstrap-select/js/bootstrap-select.js"></script>