Input for selecting images with preview
Image Selector class creates an image selector input with image preview based on select element. Images can be changed using select element itself or by clicking on image. Additionally this class provides API to select first, last, next or previous images or an image with specific index. It also can regenerate preview images for dynamical input manipulations.
This class ir provided as a standalone package or jquery plugin
Contents
Download
Example codes
<html> <head> </head> <body> <p>Click on image to change it</p> <p><select name='image' id='images'> <option value='./images/facebook.png'>Facebook</option> <option value='./images/twitter.png'>Twitter</option> <option value='./images/draugiem.png'>Draugiem</option> <option value='./imagesreddit.png'>Reddit</option> </select></p> <p><input type='button' value='Get value' onclick='alert(document.getElementById("images").value);'/></p> <script type="text/javascript" src="./image_selector.packed.js" ></script> <script type="text/javascript"> var imgs = new image_selector("images",{ //width of images width: 100, //height of images height: 100, //change image on click changeOnClick: true, //hide original input hideInput: true, }); </script> </body> </html>
Live Examples
Examples in action
Method list
Constructor
| Method name | new image_selector(id, config); |
| Description | Create image selector from select input element |
| Input parameters | string or HTML element id - id of select element or select HTML element itself json config - Json structure with configuration properties
|
| Example input | var imgs = new image_selector("images",
{
//width of images
width: 100,
//height of images
height: 100,
//change image on click
changeOnClick: true,
//hide original input
hideInput: true
}); |
| Jquery example | $("somelement").imageSelector(
{
//width of images
width: 100,
//height of images
height: 100,
//change image on click
changeOnClick: true,
//hide original input
hideInput: true
}); |
First image
| Method name | first() |
| Description | Switch selection to first image |
| Example | imgs.first() |
| Jquery Example | $("somelement").imageSelector("first") |
Last image
| Method name | last() |
| Description | Switch selection to last image |
| Example | imgs.last() |
| Jquery Example | $("somelement").imageSelector("last") |
Next image
| Method name | next() |
| Description | Switch selection to next image. If current image is the last one, then next image will be the first one |
| Example | imgs.next() |
| Jquery Example | $("somelement").imageSelector("next") |
Previous image
| Method name | prev() |
| Description | Switch selection to previous image. If current image is the first one, then previous image will be the last one |
| Example | imgs.prev() |
| Jquery Example | $("somelement").imageSelector("prev") |
Select index
| Method name | select(index) |
| Description | Switch selection to specified index. Indexes count from 0 |
| Example | imgs.select(2) |
| Jquery Example | $("somelement").imageSelector("select", 2) |
Reset input
| Method name | reset() |
| Description | If you have dynamically added or deleted select input options, you need to call reset method to recreate changes in image_selector object |
| Example | imgs.reset() |
| Jquery Example | $("somelement").imageSelector("reset") |
Latest changes
None for now
You may also be interested in:
Powered by BlogAlike.com
