1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
|
(function($)
{
/**
* @param options
* classCarrousel : la class du slider à creer
* idCarrousel : l'id du slider à creer
*/
$.fn.pluginCarrousel=function(options)
{
//On définit nos paramètres par défaut
var defauts=
{
'classCarrousel': 'carrousel',
'idCarrousel': 'thumbs',
'nbElementsAffiche' : 11,
'delai' : 500,
'fadeIn' :500,
'callback' : function transformeVignette(){
noirBlanc();
}
};
// fusion des parametres
var parametres=$.extend(defauts, options);
return this.each(function()
{
// ------------------------------- début du plugin ---------------------------------------------------------
$(this).hide();
$(this).after('<ul class='+parametres.classCarrousel+' id='+parametres.idCarrousel+'></ul>');
// pour tous les liens, on les copie vers le slider
var lien = $(this).find('a');
$(lien).each(function(){
$('#'+parametres.idCarrousel).append($(this).clone());
});
$('#'+parametres.idCarrousel).find('a').wrap('<li></li>');
// Element de référence pour la zone de visualisation (ici le premier item)
var Reference = $('.'+parametres.classCarrousel+' li:first-child');
// Nombre d'éléments de la liste
var NbElement = $('.'+parametres.classCarrousel+' li').length;
// Englobage de la liste par la zone de visualisation
$('.'+parametres.classCarrousel).wrap('<div class="carrousel-conteneur"></div>');
// Englobage de la liste de visualisation et des boutons
$(".carrousel-conteneur").wrap('<div class="placement-carrousel"></div>');
$(".placement-carrousel").hide();
// Application d'une largeur à la bande de diapositive afin de conserver une structrure horizontale
$('.'+parametres.classCarrousel).css("width", (Reference.width() * NbElement) );
//remettre à 0 le margin si on recharge une autre catégorie
$('.'+parametres.classCarrousel).css("margin-left","0px");
// Ciblage de la zone de visualisation largeur hauteur
$(".carrousel-conteneur")
.width( Reference.width() * parametres.nbElementsAffiche)
.height( Reference.height() )
// Blocage des débordements
.css("overflow", "hidden")
.css("margin-left","auto")
.css("margin-right","auto");
// Insertion des boutons de navigation
if(NbElement>parametres.nbElementsAffiche)
{
$(".placement-carrousel").append(''
+ '<ul class="carrousel-pagination">'
+ ' <li class="carrousel-prev"><button type="button"></button></li>'
+ ' <li class="carrousel-next"><button type="button"></button></li>'
+ '</ul>'
+ '');
}
// si la fonction anonyme call back est défini, on l'appelle
if(parametres.callback)
{
// on envoie comme paramètre le nom du slider
parametres.callback('#'+parametres.idCarrousel+' img');
$(".placement-carrousel").delay(parametres.delai).fadeIn(parametres.fadeIn);
}
// -------------------------- gestion des click ------------------------------------------------
var cpt=0;
$(".carrousel-next button").click(function() {
if((NbElement-cpt)>parametres.nbElementsAffiche) {
cpt++;
$(".carrousel").animate({
marginLeft : - (Reference.width() * cpt)
},250);
}
});
$(".carrousel-prev button").click(function() {
if(cpt > 0) {
cpt--;
$(".carrousel").animate({
marginLeft : - (Reference.width() * cpt)
},250);
}
});
// -------------------------- Fin de gestion des click ------------------------------------------------
// ------------------------------- fin du plugin ---------------------------------------------------------
});
};
})(jQuery);
// fonction pour copier une image et l'afficher en noir blanc avec fadeIn
function noirBlanc(){
// copie l'image et passe la copie en noirBlanc
$("#thumbs img").each(function(){
var el = $(this);
el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>")
.clone().addClass('img_grayscale').css({"position":"absolute","z-index":"100","opacity":"0"}).insertBefore(el).queue(function(){
var el = $(this);
el.parent().css({"width":this.width,"height":this.height});
el.dequeue();
});
this.src = grayscale(this.src);
});
// Fade image
$("#thumbs img").mouseover(function(){
$(this).parent().find('img:first').stop().animate({opacity:1}, 150);
})
$('.img_grayscale').mouseout(function(){
$(this).stop().animate({opacity:0}, 400);
});
}
// fonction pour passer une vignette en NoirBlanc
function grayscale(src){
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var imgObj = new Image();
imgObj.src = src;
canvas.width = imgObj.width;
canvas.height = imgObj.height;
ctx.drawImage(imgObj, 0, 0);
var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
for(var y = 0; y < imgPixels.height; y++){
for(var x = 0; x < imgPixels.width; x++){
var i = (y * 4) * imgPixels.width + x * 4;
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
imgPixels.data[i] = avg;
imgPixels.data[i + 1] = avg;
imgPixels.data[i + 2] = avg;
}
}
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas.toDataURL();
} |
