Imagery - A simple jQuery image picker plugin that enables user or a programmer to not just pick images but have an amount of options to choose from in order to manipulate it's effect.
- Imagery v1.0.0
- Imagery v1.0.5
The set up is very simple Download or Fork or Clone this repository from either github or bitbucket Extract the files - imagery.js,index.html,imagery.css, Folder(images- contains the images for testing purpose)
You can include the extracted files as a jquery library simple do
<link rel="stylesheet" type="text/css" href="imagery.css"/>
for the css in the doctype header
For the scripts
<script src="imagery.js" type="text/javascript"></script>
And then you are good to go
Create a div container with and id or a class Then include the images inside the div container Give the images a common id or class name - eg.imagery, pictures etc as a class or ID name NB. For the plugin to work you need to do what is above Get the name of the image the user will click by including data-src . NB this is very important.. USE data-src TO GET THE VALUE OR THE NAME OF THE CLICKED IMAGE
<div id="image-container">
<img src="images/image1.jpg" data-src="images/image1.jpg" class="imagery"/>
</div>
Instantiate the plugin to a jQuery Selector Either
$("#image-container > img").Imagery();
OR
$("img").Imagery()
OR
$(".imagery").Imagery();
`{
wrapperCss:{},
wrapperAttr:{},
usebase64Img:boolean (True or False),
customIndicator:{},
useImgAsIndicator:'', -> Takes string as value
onSelectedImage:function(data){
},
onHoverImage:function(data){
},
allowHover:boolean (True or False),
indicator:boolean (True or False),
addOpacity:[0 - 1]
}`
There are a lot of options available at codealligh.net/plugins for the plugin The plugin is also flexible to use .It has the option for the user to write his/her own css by calling the wrapperCss object
- Writing tests
- Code review
- Other guidelines
Name : Acheampong Lord Offei Country : Ghana - West Africa Email: offeilord@gmail.com
Company Name: Code Alliance - GH Email : codealligh@gmail.com