Ecco le specifiche e le api di Minimit Gallery 2.0. Nella pagina del plugin puoi trovare il codice sorgente e la demo.

Quando usi Minimit Gallery devi specificare tutti gli item Html items della galleria, dandogli un id costruito con il nome di referenza la stringa item e in numero dell’item, in questo modo:

<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>

Prima di iniziare con il codice Javascript devi includere il codice javascript di mg:

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

Si crea un istanza di Minimit Gallery in questo modo:

var mgObject = new Mg(settings);

Dove settings è un oggetto literal con questi dati (puoi non specificare arguments se sono default):

• settings.reference:string [Required] – gallery reference string
• settings.totalItems:number [Default:null] – needed only on galleries without items, specify how many items there are inside the gallery
• 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.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.interactive:boolean [Default:false] – if the items are interactive on click
• 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.firstToSteps:boolean [Default:false] – true if the items scrolls all the way on first, false if the items scrolls only to show first
• settings.eventName.lastToSteps:boolean [Default:false] – true if the items scrolls all the way on last, false if the items scrolls only to show last
• settings.eventName.multiLess:number [Default:0] – how many you want before activated in the multiple data
• settings.eventName.multiPlus:number [Default:0] – how many you want after activated in the multiple data
• settings.eventName.multiMode:string [Default:'centered'] – the mode of multi can be ‘centered’ ‘fixed’ ‘flexible’
• settings.eventName.fixedLess:number [Default:0] – setting for multiMode ‘fixed’, number of additional before items on the serie
• settings.eventName.fixedPlus:number [Default:0] – setting for multiMode ‘fixed’, number of additional after items on the serie
• settings.eventName.multiLimit:boolean [Default:true] – if true it decreases multiLess and multiPlus when you have lower item count (limits the multi array to item count)
• 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
• 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 event galleries
• settings.eventName.linkedmultiply:number [Default:1] – number to multiply the activation of linked galleries
• settings.eventName.scrollIsVertical:boolean [Default:false] – if the scroll is vertical
• settings.eventName.scrollInvert:boolean [Default:false] – inverts the scroll
• settings.eventName.scrollFriction:number [Default:0] – factor of scroll inertia: use a number between 0 and 1
• settings.eventName.scrollPower:number [Default:0.6] – factor of scroll power: use a number between 0 and 1
• settings.eventName.scrollFurther:number [Default:0] – factor of elastic scroll further limits: use a number between 0 and 1
• settings.eventName.scrollFraction:boolean [Default:false] – if true scroll activates onEvent with fractions
• settings.eventName.scrollWheel:boolean [Default:false] – implement mouse wheel support on scroll
• settings.eventName.scrollCursorOff – what cursor to assign as css style
• settings.eventName.scrollCursorOn – what cursor to assign as css style
• settings.eventName.dragIsVertical:boolean [Default:false] – if the drag is vertical
• settings.eventName.dragInvert:boolean [Default:false] – inverts the drag
• settings.eventName.dragFriction:number [Default:0.85] – factor of drag inertia: use a number between 0 and 1
• settings.eventName.dragPower:number [Default:0.6] – factor of drag power: use a number between 0 and 1
• settings.eventName.dragFurther:number [Default:0.2] – factor of elastic drag further limits: use a number between 0 and 1
• settings.eventName.dragFraction:boolean [Default:false] – if true drag activates onEvent with fractions
• settings.eventName.dragWheel:boolean [Default:false] – implement mouse wheel support on drag
• settings.eventName.dragCursorOff – what cursor to assign as css style
• settings.eventName.dragCursorOn – what cursor to assign as css style
• settings.eventName.rounding:string [Default:'round'] – can be “round” “floor” “ceil”, when using scrollFraction or dragFraction you set this to have different this.fraction on events

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

Dopo aver instanziato la galleria, attacchi una funzione agli eventi del settaggio, così:

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

Dentro a questa funzione hai accesso a numerose variabili della galleria, oltre a tutte le variabili dell’ eventName del costruttore:

• this.eventType:string – can be “init” “item” “prev” “next” “first” “last” “scroll” “drag” “fraction” “anchor” “reset” or custom
• this.items:documentElements – the javascript documentElements of the gallery
• this.totalItems:number – the items count
• 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
• this.scrollPosition:number – current position of scroll on Move and Release events
• this.scrollDragged:number – amount dragged on scroll on Move and Release events
• this.dragPosition:number – current position of drag on Move and Release events
• this.dragDragged:number – amount dragged on drag on Move and Release events
• this.fraction:number – fraction of activation when you use scrollFraction or dragFraction, different values based on settings.eventName.rounding

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

Il codice dentro alla funzione di evento è totalmente custom e puoi usare Jquery o altre librerie, devi scrivere il codice all’interno per far funzionare il plugin e avere delle animazioni.

Dopo aver settato le funzioni degli eventi custom, devi inizializzare la galleria con questo codice:

mgObject.init();

La classe ha varie altre funzioni che puoi usare nel tuo codice:

• 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 gallery event, undefined in the num to leave the same activation
• 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

Questo è tutto il codice che ti serve per iniziare a usare il 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(){
	document.getElementById("#"+this.reference+"-item-"+this.deactivated).className = '';
	document.getElementById("#"+this.reference+"-item-"+this.activated).className = 'active';
}
// init the gallery
mgObject.init();

</script>

Guarda anche il codice della demo o lo snippet nel codice sorgente che hanno:

• Item di interazioni degli eventi: previous next first and last
• Multipli eventi
• Esempi di funzioni di eventi con Jquery