Minimit Gallery 1.0 Guida

Ottobre 25, 2011 18 Commenti

Minimit Gallery 2.0 è uscito con tante nuove funzionalità. Visita il nuovo articolo. Se ti serve la vecchia versione di Minimit Gallery c’è la versione 1.05.

In questo articolo spiego passo passo come iniziare a usarlo, scaricando il codice sorgente puoi anche vedere il codice dela pagina demo e lo snippet, non è complicato ma bisogna imparare prima alcuni codici che il plugin usa.

Passo 1: Incorpora Risorse Esterne

In questo momento il plugin Minimit Gallery usa Jquery, inoltre incorporo i javascript delle funzioni custom easing delle trasformazioni css per le animazioni, dato che probabilmente serviranno se si usa Jquery per animare la galleria.

<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>
Passo 2: Costruisci l’Html

Il plugin usa una stringa di referenza per registrare la galleria. Puoi assegnare oggetti alla galleria dandogli l’id “reference-X” dove X è il numero dell’oggetto. Puoi anche assegnare pulsanti per previous, next, first e last usando l’id come nel codice qua sotto.

Ecco un esempio di Html della galleria.

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

È importante che non usi id con lo stesso nome “reference-” della galleria nell’html eccetto quelle mostrate prima.

Passo 3: Costruisci le Funzioni di Callback

Con le funzioni di callback tu costruisci le animazioni per init e per interazioni (click, mouse hover, mouse out) basandoti sugli argomenti delle funzioni. Le funzioni di callback saranno chiamate automaticamente dal plugin in caso di interazione o di cambio di stato della galleria, è questo codice aperto che rende Minimit Gallery estremamente flessibile.

Ecco un esempio di funzione di callback.

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");
}
Passo 3: Inizializza la Minimit Gallery

Chiama la funzione mg_init con l’id di referenza del codice html e i parametri desiderati.

Ecco un esempio di inizializzazione della galleria.

mg_init({
	reference:"example1b",
	click:{
		activated:[0],
		interactive:true,
		max_activated:1,
		automatic:1000, automaticpause:5000
	},
	interaction:{
		cycle:true
	}
});
Step 4: Building the Css

Dovete costruire il css custom degli oggetti della galleria, se non lo avete ancora fatto. Ed ecco la galleria è pronta!

Codice Documentato per le Funzioni di Callback

Ecco il codice snippet documentato per costruire le funzioni di callback.

/*
 * 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
Codice Documentato per la Funzione di Inizializzazione

Ecco il codice snippet documentato per costruire la funzione di inizializzazione.

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

Siete liberi di commentare qua sotto con commenti, bugs e feature request, inoltre commentate con il link alla vostra implementazione di Minimit Gallery!

Commenti

    Bc1964783bb56f2926a195367c8a5248?s=40&amp;d=http%3A%2F%2F1.gravatar
      501526fdc5c88dfdc7397d82d46c5d34?s=40&amp;d=http%3A%2F%2F1.gravatar
    5d45308d3130ee2755a91234ec94a2ad?s=40&amp;d=http%3A%2F%2F1.gravatar
    Dd0a109a15dc06211173b79cd2fff858?s=40&amp;d=http%3A%2F%2F1.gravatar
    260c0a339b0a0fe1b243d2c3e648efae?s=40&amp;d=http%3A%2F%2F0.gravatar
    Jesús Martínez
    918c1ac89804c4bc42784c0e67b6fd76?s=40&amp;d=http%3A%2F%2F1.gravatar
    4217215a8e1bca3be852c1c5dec0aa68?s=40&amp;d=http%3A%2F%2F0.gravatar
    4217215a8e1bca3be852c1c5dec0aa68?s=40&amp;d=http%3A%2F%2F0.gravatar
      501526fdc5c88dfdc7397d82d46c5d34?s=40&amp;d=http%3A%2F%2F1.gravatar
    6dd17ecef67b5bdff55fe8636012b772?s=40&amp;d=http%3A%2F%2F0.gravatar
    6dd17ecef67b5bdff55fe8636012b772?s=40&amp;d=http%3A%2F%2F0.gravatar
    6dd17ecef67b5bdff55fe8636012b772?s=40&amp;d=http%3A%2F%2F0.gravatar
      501526fdc5c88dfdc7397d82d46c5d34?s=40&amp;d=http%3A%2F%2F1.gravatar
    Ee02dc11f8698060edd0635944cf647d?s=40&amp;d=http%3A%2F%2F0.gravatar
      501526fdc5c88dfdc7397d82d46c5d34?s=40&amp;d=http%3A%2F%2F1.gravatar

Lascia un commento