Here the specifications and api of Minimit Gallery 2.0. In the plugin page you can find the source code and the demo.

When you use Minimit Gallery you need to specify all the Html items of the gallery, giving them an id constructed with the reference name the item string and the number of the item, this way:

<div id="reference-item-0">0</div>
<div id="reference-item-1">1</div>
<div id="reference-item-2">2</div>
<div id="reference-item-3">3</div>
<div id="reference-item-4">4</div>
<div id="reference-item-5">5</div>

Before starting with the Javascript code you need to include the mg javascript code:

<script src="mg.min.js" type="text/javascript"></script>

You create an instance of Minimit Gallery this way:

var mgObject = new Mg(settings);

Where settings is an object literal with this data (feel free to skip arguments if default):

• settings.reference:string [Required] – gallery reference string
• settings.eventName:object [can be multiple] – arguments for event interactions, the name must be the name of a valid Javascript event: click dblclick mousedown mouseup mousemove mouseenter OR mouseover mouseleave OR mouseout touchstart touchend touchcancel touchleave touchmove focus
• settings.eventName.activated:array [Default:null] – array of numbers for activated items on init
• settings.eventName.cycle:boolean [Default:false] – if the activation cycles
• settings.eventName.prevSteps:number [Default:1] – how many to jump on prev
• settings.eventName.nextSteps:number [Default:1] – how many to jump on next
• settings.eventName.prevtosteps:boolean [Default:false] – for prev, true if the items scrolls all the way, false if the items scrolls only to show first and last
• settings.eventName.nexttosteps:boolean [Default:false] – for next, true if the items scrolls all the way, false if the items scrolls only to show first and last
• settings.eventName.interactive:boolean [Default:false] – if the items are interactive on click
• settings.eventName.anchorize:boolean [Default:false] – if you want to implement url anchors to remember position
• settings.eventName.linked:array [Default:null] – object of linked galleries
• settings.eventName.linkedmultiply:number [Default:1] – number to multiply the activation of linked galleries
• settings.eventName.maxActivated:number [Default:1] – maximum amount of activated items – unlimited if Infinity
• settings.eventName.deactivable:boolean [Default:false] – if the click activated items can be deactivated on click
• settings.eventName.multiLess:number [Default:0] – how many you want before activated in the multiple data – nothing if undefined
• settings.eventName.multiPlus:number [Default:0] – how many you want after activated in the multiple data – nothing if undefined
• settings.eventName.auto:number [Default:null] – milliseconds for automatic gallery
• settings.eventName.autoSlow:number [Default:null] – milliseconds for automatic gallery pause when user interacts
• settings.eventName.autoInverse:boolean [Default:false] – false for automatic to next, true for automatic to prev

var mgObject = new Mg({
	reference:"reference",
	click:{
		activated:[0],
		cycle:true,
		interactive:true,
		maxActivated:1,
		auto:1000, autoSlow:5000
	}
});

After instantiating the gallery, you attach function to the setting’s events, like this:

mgObject.eventName.onEvent = function(isInit){}

Inside this function you have access to numerous variables of the gallery, besides all constructor eventName variables:

• this.items:documentElements – the javascript documentElements of the gallery
• this.evnt:string – the event name
• this.reference:string – the gallery reference string
• this.activated:array – array of item numbers activated
• this.deactivated:number – item number deactivated
• this.multiActivated:array – array of item numbers activated with multiLess and multiPlus
• this.multiBeforeIn:array – array of item numbers activated on left with multiLess and multiPlus
• this.multiBeforeOut:array – array of item numbers deactivated on left with multiLess and multiPlus
• this.multiAfterIn:array – array of item numbers activated on right with multiLess and multiPlus
• this.multiAfterOut:array – array of item numbers deactivated on right with multiLess and multiPlus
• this.direction:number – 0 going left, 1 going right, null for no direction

mgObject.click.onEvent = function(isInit){
	document.getElementById("#"+this.reference+"-item-"+this.deactivated).className = '';
	document.getElementById("#"+this.reference+"-item-"+this.activated).className = 'active';
}

The code inside the event functions is totally custom and you can also use Jquery or any other libraries, you have to write it to make the plugin works and have nice animations.

After setting the custom events functions, you have to initialize the gallery with this code:

mgObject.init();

The class have various other functions you can use in your code:

• init() – initialize the gallery
• setSettings(settings:object) – same settings structure as the constructor
• setState(num:number, evnt:string, alsoLinked:boolean, pauseAuto:boolean, isInit:boolean) – set a state in a event, null in the num to deactivate the event gallery
• refreshItems() – use it if you add or remove items, it refreshes the plugin items
• autoStart(evnt:string) – starts automatic, if settings.eventName.auto has been defined
• autoSlow(evnt:string) – slows automatic, if settings.eventName.autoSlow has been defined
• autoStop(evnt:string) – stops automatic
• mapNum((num:number, less:number, plus:number, max:number, cycle:boolean) – returns a maps a serie of numbers based on num +- add, between 0 and max (ex: 4, 5, 0, 1, 2)
• mapDistance(center:number, num:number) – returns the distance between num and center, with center having the lowest number, based on max and min (ex: 2,1,0,1,2)
• mapDistanceReverse(center:number, num:number, max:number, min:number) – returns the reverse distance between num and center, with center having the highest number, based on max and min (ex: 0,1,2,1,0)
• findNearestDistance(i:number, z:number, max:number, cycle:boolean) – returns the nearest distance between i and z, considering values from 0 to max

This is all the code you need to start using this plugin:

<!-- specify the html items -->
<div id="reference-item-0">0</div>
<div id="reference-item-1">1</div>
<div id="reference-item-2">2</div>
<div id="reference-item-3">3</div>
<div id="reference-item-4">4</div>
<div id="reference-item-5">5</div>
<!-- include mg Javascript code -->
<script src="mg.min.js" type="text/javascript"></script>
<script type="text/javascript">

// construct gallery
var mgObject = new Mg({
	reference:"reference",
	click:{
		activated:[0],
		cycle:true,
		interactive:true,
		maxActivated:1,
		auto:1000, autoSlow:5000
	}
});
// specify gallery click event function
mgObject.click.onEvent = function(isInit){
	document.getElementById("#"+this.reference+"-item-"+this.deactivated).className = '';
	document.getElementById("#"+this.reference+"-item-"+this.activated).className = 'active';
}
// init the gallery
mgObject.init();

</script>

Be sure to check the demo code or the snippet in the source code with:

• Event interaction items: previous next first and last
• Multiple events
• Events functions examples with Jquery