Minimit Gallery 2.0 guide

In this article I'll explain step by step how to start to use Minimit Gallery 2.0

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

Plugin
Plugin
Check out Minimit Gallery plugin

The Html Api

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>

The Constructor Api

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.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:string [Default:false] - if you want to implement url anchors to remember position: false or "useAnchor" or "useLinkHash" or "useLinkUrl"
  • 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.inverse:boolean [Default:false] - if the items count are inversed
  • 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.disableFriction:boolean [Default:false] - true to disable friction animation
  • 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

Example of Constructor

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

The Events Api

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.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.startPosX:number - the clientX value when clicking the drag or the scroll
  • this.startPosY:number - the clientY value when clicking the drag or the scroll
  • this.fraction:number - fraction of activation when you use scrollFraction or dragFraction, different values based on settings.eventName.rounding

Example of Event Function

mgObject.click.onEvent = function(){
    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.

The Methods Api

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

Putting It All Together

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 type="text/javascript" src="mg.min.js"></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>

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

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