Javascript

[JS] Minimit Gallery – Un plugin jQuery pour créer sliders avancés

Minimit Gallery est un plugin jQuery permettant de créer de nombreux types de galeries, sliders, carousels ou slideshows d’images.

Il ne propose qu’une couche de logique permettant de gérer et créer rapidement des sliders de contenu de différents types, ce sera donc à vous de le personnaliser à vos souhaits.

  • Sliders de contenu basiques
  • Slideshows de contenus avec défilement automatique
  • Carousels de contenu
  • Pagination dynamique
  • Menus avancés
  • Etc

Un bon exemple permet de mieux comprendre le fonctionnement:
minimit_gallery

Pour recréer ce carousel, voici le code utilisé côté HTML:


	

		
0

		
1

		
2


		
3

		
4

		
5

		
6

		
7

		
8


		
9

		
10

		
11

		
12

		
13

		


		
Prev

		
Next

Et le Javascript permettant de créer le carousel:

var reference = "example9";
this[reference+"_click"] = this[reference+"_init"] = function(reference, activated, deactivated, prevsteps, nextsteps, multiple, cycle){
	$("#"+reference+"-"+deactivated).removeClass("active");
	$("#"+reference+"-"+activated).addClass("active");
	var arr = multiple.activated;
	var alpha = Math.PI*2/(arr.length-1);
	var xradius = 200;
	var yradius = 60;
	for (var i=0;i<arr.length-1;i++){
		var mypath = $("#"+reference+"-"+arr[i]);
		var middle = Math.floor(arr.length/2);
		//
		if(arr[i]==activated || i==middle){ var depth = 0; }
		else { var depth = mg_mapDistanceReverse(multiple.plus, i, arr.length, 0); }
		//
		var theta = alpha*(activated-arr[i]-depth/6)+1.6; // -depth/6 will give additional distance based on depth: it gives space for activated
		var x = 20+xradius+Math.cos(theta)*xradius;
		var y = yradius+Math.sin(theta)*yradius;
		var w = h = y/4;
		var scale = 0.2+y/140;
		mypath.stop().css("z-index", Math.round(y/10));
		if(arr[i]==activated){
			w = 200;
			h = 100;
			x -= 75;
			y -= 50;
			scale = 1;
			mypath.css("border-radius", 20)
		} else if(arr[i]==deactivated){
			mypath.css("border-radius", 100)
			w = 50;
			h = 50;
		} else {
			w = 50;
			h = 50;
		}
		mypath.animate({width:w, height:h},{queue:false, duration:1300, specialEasing: { width:'easeOutExpo', height:'easeOutExpo'}});
		mypath.animate({marginLeft:x, marginTop:y, transform: 'scaleX('+scale+') scaleY('+scale+')'},{queue:true, duration:1300, specialEasing: {marginLeft:'easeOutExpo', marginTop:'easeOutExpo', transform:'easeOutExpo'}});
	}
	$("#"+reference+"-"+deactivated).removeClass("active");
	$("#"+reference+"-"+activated).addClass("active").css("z-index",100);
}
mg_init({
	reference:"example9",
	activated:[0],
	click:{
		interactive:true,
		max_activated:1,
		less:7, plus:7
	},
	interaction:{
		cycle:true
	}
});

Source