Minimit Gallery 2.0 is out with many new features. Check out the new article. If you still need the old Minimit Gallery there’s the version 1.05.
In this article I’ll explain step by step how to start to use it in your works, downloading the source code you can see also the demo page code and the snippet, it’s not complicated but it use some code that you should learn to use first.
Step 1: Embed External Resources
At this time the Minimit Gallery plugin uses Jquery, and also i embed custom easing functions and css transformations javascripts for the animations, cause probably you’ll need them if you use Jquery to animate the gallery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> <!-- or <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script> --> <script src="jquery.easing.min.js" type="text/javascript"></script> <!-- custom easing functions not needed for the plugin but you probably need for animations --> <script src="jquery.transform.light.js" type="text/javascript"></script> <!-- does css transformations like scale and rotate https://github.com/louisremi/jquery.transform.js --> <script src="mg.min.js" type="text/javascript"></script>
Step 2: Build the Html
The plugin uses a reference string to register the gallery. You can assign items to the gallery by using the id “reference-X” where X is the item number. You can also assign buttons for previous, next, first and last by using the id shown in the code below.
Here is an example of gallery Html.
<div id="example1b"> <!-- reference id here, not required but useful for css --> <div> <div id="example1b-prev">Prev</div> <!-- reference-prev --> <div id="example1b-0">0</div> <!-- reference-0 to reference-x --> <div id="example1b-1">1</div> <div id="example1b-2">2</div> <div id="example1b-3">3</div> <div id="example1b-4">4</div> <div id="example1b-5">5</div> <div id="example1b-next">Next</div> <!-- reference-next --> </div> </div>
It’s important that you don’t use the same id of the gallery with “reference-” on the html except the ones explained before.
Step 3: Build the Callback Functions
With the callback functions you build the animations on init and on interactions (click, mouse hover, mouse out) based on the arguments of the functions. The callback functions will be called by the plugin on every interaction or change of state of the gallery, it’s this open code that makes this Minimit Gallery extremely flexible.
Here is an example of a callback function.
var reference = "example1b"; this[reference+"_click"] = this[reference+"_click_init"] = function(reference, activated, deactivated, prevsteps, nextsteps, multiple, cycle){ $("#"+reference+"-"+deactivated).removeClass("active"); $("#"+reference+"-"+activated).addClass("active"); }
Step 3: Initialize the Minimit Gallery
Just call the mg_init function with the html id reference and the desired parameters. On initialization the plugin will call the init callback automatically.
Here is an example of a gallery initialization.
mg_init({ reference:"example1b", click:{ activated:[0], interactive:true, max_activated:1, automatic:1000, automaticpause:5000 }, interaction:{ cycle:true } });
Step 4: Building the Css
You write the custom css for the items of the gallery, if you haven’t already. Then the gallery is done!
Documented Code for Callback Functions
Here is the documented snippet code for building the callback functions.
/* * Custom functions callbacks for managing gallery graphical behaviour * @function this[reference+append](reference, activated, deactivated, steps, multiple, cycle) * @param reference:string - gallery string reference * @param activated:array - array of activated items * @param deactivated:array - array of deactivated items * @param prevsteps:number - how many to jump on prev * @param nextsteps:number - how many to jump on next * @param multiple:object - object with data for managing multiple sequential states on the same interaction, based on less and plus defined on init * multiple.plus:number - the multiple_plus setted * multiple.less:number - the multiple_less setted * multiple.activated:array - multiple items from -less activated to +plus activated * multiple.deactivated:array - multiple items deactivated * multiple.old_activated:array - multiple items from -less old_activated to +plus old_activated * multiple.distance:number - distance between activated and old_activated * multiple.jumped:number - items jumped from activated to old_activated, varies between -less and +plus * multiple.direction:bool - false equals left, true equals right * multiple.before_in:array - the items before multiple that comes in * multiple.before_out:array - the items before multiple that goes out * multiple.after_in:array - the items after multiple that comes in * multiple.after_out:array - the items after multiple that goes out * @param cycle:boolean - if the items cycle */ var reference = "reference"; this[reference+"_click"] = function(reference, activated, deactivated, prevsteps, nextsteps, multiple, cycle){} // click function this[reference+"_over"] = function(reference, activated, deactivated, prevsteps, nextsteps, multiple, cycle){} // hover function this[reference+"_out"] = function(reference, activated, deactivated, prevsteps, nextsteps, multiple, cycle){} // out function this[reference+"_click_init"] = function(reference, activated, deactivated, prevsteps, nextsteps, multiple, cycle){} // click init function this[reference+"_hover_init"] = function(reference, activated, deactivated, prevsteps, nextsteps, multiple, cycle){} // click init function this[reference+"_out_init"] = function(reference, activated, deactivated, prevsteps, nextsteps, multiple, cycle){} // click init function this[reference+"_prevclick"] = function(reference, prevsteps){} // function executed when prev is clicked this[reference+"_prevhide"] = function(reference, prevsteps){} // function executed when prev is hide this[reference+"_prevshow"] = function(reference, prevsteps){} // function executed when prev is shown this[reference+"_nextclick"] = function(reference, nextsteps){} // function when next is clicked this[reference+"_nexthide"] = function(reference, nextsteps){} // function executed when next is hide this[reference+"_nextshow"] = function(reference, nextsteps){} // function executed when next is shown
Documented Code for Initialization Function
Here is the documented snippet code for building the initialization function.
/* * Initialize the Minimit Gallery (feel free to SKIP ARGUMENTS if optionals or if you are using defaults) * @function mg_init(options:object) * @param options.reference:string [Required] - gallery string reference * @param options.click:object [Optional] - arguments for click interactions as follows * @param options.click.activated:array [Optional] - array of numbers for activated items on init * @param options.click.interactive:boolean [Default:false] - if the items are interactive on click * @param options.click.anchorize:boolean [Default:false] - if you want to implement url anchors to remember position * @param options.click.linked:array [Optional] - array of reference strings for linked galleries * @param options.click.linkedmultiply:number [Optional] - number to multiply the activation of linked galleries * @param options.click.max_activated:number [Default:Infinity] - maximum amount of activated items - unlimited if undefined * @param options.click.deactivable:boolean [Default:false] - if the click activated items can be deactivated on click * @param options.click.less:number [Optional] - how many you want before activated in the multiple data - nothing if undefined * @param options.click.plus:number [Optional] - how many you want after activated in the multiple data - nothing if undefined * @param options.click.automatic:number [Optional] - milliseconds for automatic gallery * @param options.click.automaticpause:number [Optional] - milliseconds for automatic gallery pause when user interacts * @param options.click.automaticinverse:boolean [Default:false] - false for automatic to next, true for automatic to prev * @param options.hover:object [Optional] - same as options.click but for mouse hover interactions * @param options.out:object [Optional] - same as options.click but for mouse out interactions * @param options.interaction.prevsteps:number [Default:1] - how many to jump on prev * @param options.interaction.nextsteps:number [Default:1] - how many to jump on next * @param options.interaction.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 * @param options.interaction.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 * @param options.interaction.cycle:boolean [Default:false] - if the items cycle */ mg_init({ reference:"reference", click:{ activated:[], interactive:false, anchorize:false, linked:[], linkedmultiply:1, max_activated:1, deactivable:false, less:1, plus:1, automatic:1000, automaticpause:5000, automaticinverse:false }, hover:{ activated:[], interactive:false, anchorize:false, linked:[], linkedmultiply:1, max_activated:1, deactivable:false, less:1, plus:1, automatic:1000, automaticpause:5000, automaticinverse:false }, out:{ activated:[], interactive:false, anchorize:false, linked:[], linkedmultiply:1, max_activated:1, deactivable:false, less:1, plus:1, automatic:1000, automaticpause:5000, automaticinverse:false }, interaction:{ prevsteps:1, nextsteps:1, prevtosteps:false, nexttosteps:false, cycle:false } }); /* API */ mg_setState("reference", 3, "_click", true, true); // mg_setState(reference, num, append, alsolinked, pauseautomatic); mg_pauseautomatic("reference", "_click",); // mg_pauseautomatic(reference, append) mg_resumeautomatic("reference", "_click",); // mg_resumeautomatic(reference, append)
Feedback
Please feel free to post comments, bugs and feature request as a comment down here, also post links of your Minimit Gallery implementations!
Great work!! is this site using minimit galery too? i see when it’s loaded it’s animated… awesome.. :)
Thanks, no this site doesn’t use minimit gallery, I’m starting using it on my projects only until recently.
This cool plugin, i will use this for my next project….
Excellent work Riccardo. You guys that build and share these javascript plugins deserve more credit.
Your work is very good, but I don´t get it´s working with Explorer.
Is there any solution for this?
Best regards
The demo works on Ie7+ https://minimit.com/mg/mg-demo.html
It can be a Css or Javascript IE bug on your code.
Excellent travail.
Même si on n’en a pas l’utilité tout de suite, on a envie de s’en servir !
Magnifique, bravo.
“Chapeau bas” comme on dit en France.
Congrats its a Great Plugin.
I like to use this.
As in example9
if i place any images in each div to have a slide show… all the images are getting displayed. Actually it should display one by one – right.
example:
6
Prev
Next
Hope you understand better once you copy the above example code.
Please suggest me: how can i display one image/video at a time.
Expecting your valuable reply.
Regards,
Thiru
I mean if we place images or video (iframe) inside DIV — all the images/videos are getting displayed. I like to show only one at a time.
How to do ?
You should give display:none to the stuff you don’t want displayed, and give display:block to the one you want to display.
For example give display:none to all items, display:block to the activated one, and display:none to the deactivated one.
Thanks for the awesome plugin!! I have one problem though.. in IE 8 and under, using example 3a, only one block shows up. when I click on it, the rest of them appear as they should. Could someone help me with this please? Thank you
Just fixed.
https://minimit.com/mg/mg-demo.html
It was a bug with ie8- and a zIndex animation.
Thank you!
Sorry for this off-topic question. I’m new to javascript and jQuery, and I thought it would be a good idea to ask someone like you… what would you recommend for newcomers to this language? Where should I start? Are there any good books or site that you can recommend? I’ve gone through some of the site you’ve built.. they are quite impressive.
Well, always learn by trial and error, try to build something your own. If you are new to programming get a good javascript programming book.
Thanks for the advice
Hey, the effects you do with this plugin are really amazing, I just wish I understood it a little better, and maybe at some point when you have time you could do a brief tutorial on one of the examples.
for example, example 11 from the demo:
I see you take in a reference to the id of the div, then the syntax in the following line:
“this[reference+"_init"] = function(reference, activated, deactivated, prevsteps, nextsteps, multiple, cycle){ // on init”
I haven’t seen the brackets before next to “this:” (this[reference+"_init"]) I see it grabs a reference to this and ties it to the init function, but what kind of syntax is that? the [] part..
the other thing I don’t understand is what the for loop is being used for specifically within the function:
“for(var i=0;i<arr.length;i++){
var mypath = $("#"+reference+"-"+i);
mypath.css("left",(i*60));
}"
what is this doing? thanks.
this[reference+"_init"] is to address a “object” or “function” using a variable.
Suppose that reference=”sometext” then this[reference+"_init"] is equal to write this.sometext_init
The loop you wrote just loops an array of values and apply a css on the IDs