Image selection box instead of text selection?
Creating a theme for wordpress and I need to have a selectbox where I can click and display images to select.
I currently have a dropdown with text for this function.
<select id='selectbox'>
<option >Airplane</option>
<option >Bowling</option>
<option >Alarm</option>
</select>
But I need to have some sort of select list with images and no text. Can you do something like this? I assume it will put jquery to work. But they could not find the answers on the net.
Ok, I spent all day to get it working, but I think this is too silly. For every possible example and solution, I have some problems with it working.
Here is the complete metabox code, I am using http://pastebin.com/1kvYz8Mg for my wordpress theme and everything else works as I needed, just what I can If I could replace the select box with some kind of list of images to select the correct image for the field.
source to share
Try the following:
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>
source to share
To do this, you need your respective images to be in their own separate divs, where each div is set to display: none.
eg.
<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 need to add an onchange event handler to your choice so that the images are displayed as a block. For example.
<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 yours and you're done. Now you can change the dropdown selection and the displayed image will change as well.
NOTE: written this without him trying, there might be a semicolon error somewhere, who knows.
source to share
I would probably use a RADIO button list and have images inside LABEL tags attached to each RADIO INPUT.
Here's a simple example 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);
}
}
source to share
Here's an example with almost pure CSS.
It uses radio receivers to store the selected value ( $_POST['thing']
), which are enclosed in associated labels. However, controlling the visibility of images on clicks is a bit tricky. Using the and links :target
, you can make all images appear when "select" is clicked, but you still need a way to hide other images when selected. So I had to add an attribute onclick
to the labels to remove the hash #select
. If anyone knows a way to hide it using CSS, I'd love to hear it :)
Using jQuery is pretty easy to implement. Assuming you have a 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 )
source to share
This example uses PHP and from the database it fetches a value between 0 and 3 and sets the opacity of the image and fetches the field value like this:
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 it, but it works
source to share
<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>
source to share