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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
|
$(document).ready(function(){ // le document est chargé
$(".navigation .toggleSubMenu.galerie ul a").click(function(){ // on selectionne tous les liens et on définit une action quand on clique dessus
page=($(this).attr("href")); // on recuperer l' adresse du lien
$.ajax({
url: "index.php"
}).done(function() {
$("#page_content").empty(); // on vide le div
$("#page_content").load(page, function(){
if(page=="include/galerie/maisons.php" || page=="include/galerie/facades.php"){
creerGalerie();
}
});
});
return false; // on desactive le lien
});
});
function creerGalerie(){
$("#conteneur").css('height','612px');
// masquer toutes les galerie div
$('div.categorie').hide();
// créer une nouvelle div pour le slider
var slider = $('<ul class="carrousel" id="thumbs"></ul>').insertAfter('#galerie');
// enlever le scroll y si on a js activé
$('#galerie').css('overflow','hidden');
// charger la légende de la photo qui est sur active!
$('#galerie').append('<div class="legende_loader"><button id=slideButton></button><p></p></div>');
// charger la categorie qui a la mention open_at_load
chargerPage($("div.categorie"), slider);
chargerLegende($("div.categorie"), 0);
afficheLegende();
noirBlanc();
var legendeAffiche=true;
$(".legende_loader button").click(function() {
if(legendeAffiche){
rentreLegende();
legendeAffiche=false;
}
else{
afficheLegende();
legendeAffiche=true;
}
});
}
/*------------------------------------fonctions-----------------------------------------------------*/
// param: div avec classe categorie, un ul pour le slider
function chargerPage(pCategorie, pSlider){
// copie les liens <a><img></a>
var lien = pCategorie.children('dl').children('dd').children('a');
// insère les liens <a><img></a> vers le slider
$(lien).each(
function(){
var li = $('<li></li>').appendTo(pSlider);
$(this).clone().appendTo(li);
});
// création du carrousel
carrousel();
// création de la galerie
galerie(pCategorie);
//cache l'élément slider
pSlider.hide();
// effet fondu à l'ouverture
pSlider.fadeIn(1000);
}
// 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":"998","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 charger la bonne légende
function chargerLegende(pCategorie, pIndexLegende){
// on insère la légende dans la galerie
var elementListe = pCategorie.children('dl').eq(pIndexLegende).children('dt').text();
$('.legende_loader').children('p').html(elementListe);
}
// affiche légende avec animation
function afficheLegende() {
$(".legende_loader").animate({marginTop : -65} ,600);
$(".legende_loader").removeClass('close');
}
// rentre légende avec animation
function rentreLegende() {
$(".legende_loader").animate({marginTop : -20} ,400);
$(".legende_loader").addClass('close');
}
// masque la légende sans animation
function masquerLegende() {
$(".legende_loader").css({marginTop : 0});
$(".legende_loader").addClass('close');
}
// 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();
}
/*------------------------------------début galerie-----------------------------------------------------*/
function galerie(pCategorie){
var settings = {
thumbListId: "thumbs",
imgViewerId: "viewer",
activeClass: "active",
activeTitle: "Photo en cours de visualisation",
loaderTitle: "Chargement en cours",
loaderImage: "images/loader/loader.gif",
};
var thumbLinks = $("#"+settings.thumbListId).find("a"),
firstThumbLink = thumbLinks.eq(0),
highlight = function(elt){
thumbLinks.removeClass(settings.activeClass).removeAttr("title");
elt.addClass(settings.activeClass).attr("title",settings.activeTitle);
},
loader = $(document.createElement("img")).attr({
alt: settings.loaderTitle,
title: settings.loaderTitle,
src: settings.loaderImage
});
highlight(firstThumbLink);
var box = $('<p></p>').attr("id",settings.imgViewerId).append($('<img />').attr({alt: "", src: firstThumbLink.attr("href")}));
box.insertBefore('.legende_loader');
var imgViewer = $("#"+settings.imgViewerId),
bigPic = imgViewer.children("img");
thumbLinks.click(function(e){
e.preventDefault();
var $this = $(this),
target = $this.attr("href");
if (bigPic.attr("src") == target) return;
highlight($this);
imgViewer.html(loader);
bigPic
.load(function(){
// évite le bug -> utilisateur click avant la fin de l'anim sur l'image suivante
bigPic.stop().css({"opacity":"1"});
imgViewer.html($(this).fadeIn(650));
})
.attr("src",target);
// index vaut la valeur de la photo
var index = thumbLinks.index($this);
// on charge la légende qui correspond à la photo clické
chargerLegende(pCategorie, index);
});
}
/*------------------------------------fin galerie-----------------------------------------------------*/
/*------------------------------------début carrousel-----------------------------------------------------*/
function carrousel(){
// Element de référence pour la zone de visualisation (ici le premier item)
var Reference = $(".carrousel li:first-child");
// Nombre d'éléments de la liste
var NbElement = $(".carrousel li").length;
// le nbre d'élément visible dans la slide bar
var NbElementAffiche = 8;
// le compteur pour les images qui défilent
var cpt=0;
// Ciblage de la bande de diapositives
var carrousel = $(".carrousel");
// Englobage de la liste par la zone de visualisation
carrousel.wrap('<div class="carrousel-conteneur"></div>')
// Application d'une largeur à la bande de diapositive afin de conserver une structrure horizontale
carrousel.css("width", (Reference.width() * NbElement) );
//remettre à 0 le margin
carrousel.css("margin-left","0px");
// Ciblage de la zone de visualisation
$(".carrousel-conteneur")
// Application de la largeur d'une seule diapositive
.width( Reference.width() * NbElementAffiche )
// Application de la hauteur d'une seule diapositive
.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>=NbElementAffiche){
$(".carrousel-conteneur").after(''
+ '<ul class="carrousel-pagination">'
+ ' <li class="carrousel-prev"><button type="button"></button></li>'
+ ' <li class="carrousel-next"><button type="button"></button></li>'
+ '</ul>'
+ '');
}
$(".carrousel-conteneur").wrap('<div class="placement-carrousel"></div>');
// Clic sur le bouton "Suivant"
$(".carrousel-next button").click(function() {
// Le nbre total d'élément - les éléments qui on déjà défilé > nbre élément dans le slider
if((NbElement-cpt)>NbElementAffiche) {
// +1 pour passer à la dia suivante
cpt++;
// Mouvement du carrousel en arrière-plan
$(".carrousel").animate({
marginLeft : - (Reference.width() * cpt)
},250);
}
});
// Action du bouton "Précédent"
$(".carrousel-prev button").click(function() {
// Si le compteur est supérieur à zéro
if(cpt > 0) {
// dia précédente
cpt--;
// Mouvement du carrousel en arrière-plan
$(".carrousel").animate({
marginLeft : - (Reference.width() * cpt)
},250);
}
});
}
/*------------------------------------fin carrousel-----------------------------------------------------*/ |
Attendre fin du chargement
Répondre avec citation
Partager