Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

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

Package contains image_selector.js, image_selector.packed.js (packed javascript), image_selector.jquery.js (jquery plugin), and three example files: simple_example.html, example.html and jquery_example.html to demonstrate class functionality.

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

This package provides an input for images with image preview and API that allows you to, go to first or last image, browse images using previous and next, change to next image by clicking on image and even using dropdown box
first    prev    next    last

Examples in action

Example scripts provided with package in action:

Method list

Constructor

Back to method list

Method namenew image_selector(id, config);
DescriptionCreate 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

  • int width - width of the image in pixels (all images will be resized to it) (default: 100)
  • int height - height of the image in pixels (all images will be resized to it) (default: 100)
  • bool changeOnClick - change image to next one on clik event (default: 'true')
  • bool hideInput - hide original select input (default: 'false')
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

Back to method list

Method namefirst()
DescriptionSwitch selection to first image
Example

imgs.first()

Jquery Example

$("somelement").imageSelector("first")

Last image

Back to method list

Method namelast()
DescriptionSwitch selection to last image
Example

imgs.last()

Jquery Example

$("somelement").imageSelector("last")

Next image

Back to method list

Method namenext()
DescriptionSwitch 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

Back to method list

Method nameprev()
DescriptionSwitch 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

Back to method list

Method nameselect(index)
DescriptionSwitch selection to specified index. Indexes count from 0
Example

imgs.select(2)

Jquery Example

$("somelement").imageSelector("select", 2)

Reset input

Back to method list

Method namereset()
DescriptionIf 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

blog comments powered by Disqus