Imagery - A Simple Image Picker Plugin

Sample Demo

Sample Usage HTML

Create an outer container to house all your images and then use it as a selector to point towards the imagers in that particular container $("selector") or Create a unique id or same class name for all the image you will use

<div id="image-container">
    <img src="images/cover1.jpg" data-src="images/cover1.jpg" class="responsive-img"/>
    <img src="images/cover2.jpg" data-src="images/cover2.jpg" class="responsive-img"/>
</div> 
OR
<img src="images/cover3.jpg" data-src="images/cover3.jpg" id="myImage"/>
<img src="images/cover4.jpg" data-src="images/cover4.jpg" id="myImage"/>

Sample Usage JQUERY

Use the outer selector to point to the inner selector eg. $("selector > img")

$("document").ready(function(){
     $("div#image-container > img").Imagery()
});
OR
$("document").ready(function(){
     $("#myImage").Imagery()
});

This will load the plugin together with the default plugin settings

Previewing the Results

If the user whats to preview the results
Define this tag in anywhere you want to preview

<div id="preview-container"></div>

This will display the image the user has selected

Other Options for the Plugin

$("document").ready(function(){
     $("div#image-container > img").Imagery({
     	wrapperCss:{},
     	indicator:true,
     	wrapperAttrs:{},
     	allowHover:false,
     	addOpacity:1,
	    usebase64Img:false,
		customIndicator:{

		},
     	onSelectedImage:function(data){

     	},
     	onHoverImage:function(data){

     	}
     });
});

wrapperCss:{} - Helps you to define your custom css stylings to the images . It is an object hence key->value pair
Example
wrapperCss:{
borderRadius:"20px",
marginTop:"10px",
marginBottom:"10px",
}
OR
wrapperCss:{
"border-radius":"20px",
"margin-top":"10px",
"margin-bottom":"10px",
}
It is done this way because javascript uses camelCases when applying css with it hence ( borderRadius )
wrapperAttrs:{} - Helps you to define ids' and classes to the images . It is an object hence key->value pair
allowHover - Accepts a boolean value either true or false . This allows you to hover the image to select it automatically
usebase64Img - Convert the image selected to base 64 { An alternative option image url }
addOpacity - Accepts number within the range of 0.2 - 1 with 0.2 inclusive. This allows you to add transparency to an image when it is clicked i.e if you dont want the active circle thing around the image
customIndicator - Accepts an object of css { "border-radius":"5px" } like and renders it to the white circular indicator around the image when it is active
NB. Better Still you can decide to use both the active circle and the opacity

NOW TO GET THE VALUE OF THE SELECTED IMAGE BY CLICKING USE
onSelectedImage:function(data){
$("#get-value").html(data);
}
data - Responsible for getting the value from the plugin hence very important to parse the data as a value
Also this will display the value in the defined id tag #get-value.
If you don't wont the value to display , hide it with css - simple as that

You can also use DATA ATTRIBUTES if you don't want it to display on the screen but rather accepts it at the background
Define a container in which you want the data to be accepted

<div id="get-value" ></div>

Define a key for which you will be using to access the value in the container you created
eg data-value - value is the key here, what you will use to access the data in data-value
onSelectedImage:function(data){
$("#get-value").data("value",data)
}
From this example, the key is value and the value itself is data
If you want to access the data, what you need to do is just use the selector
$("#get-value").data("value")
More To Come Later !!!!!!!!!!!!!
Contact Details in the Readme file
Designed By LORD KAY ACHEAMPONG - offeilord@gmail.com