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
|
// Déclaration du plugin
(function($) {
var inProgress = false;
$.fn.Diaporama = function(options) {
// Paramètres par défaut
var defaultSettings = {
fullSizeImage: "#fullSizeImage",
enlargeDescription: "Click to enlarge"
};
// Fusion des paramètres utilisateur et des paramètres par défaut
if (options) {
options = $.extend(defaultSettings, options);
}
// Traverser tous les noeuds
this.each(function() {
var $this = $(this);
$this.click(function(event) {
var imgBackWidth, imgFrontWidth;
var imgFrontMarginLeft, imgBackMarginLeft, topPos;
var imgFront, imgBack, imgFrontId;
var borderSize;
var description;
var img = $(event.target);
var getOriginalImageSize = function() {
var tmp = new Image();
tmp.src = img.attr("src");
return [tmp.width, tmp.height];
};
// Empècher le script d'être lancé plusieurs fois en même temps
if (inProgress) {
return;
}
inProgress = true;
imgFront = $(options.fullSizeImage);
imgFrontId = imgFront.attr("id");
// Récupération de la description
description = $.trim(img.attr("alt").replace(options.enlargeDescription, ""));
// Récupération de la largeur de la bordure
borderSize = (imgFront.css("borderTopWidth")).replace("px", "");
// Récupération de la taille d'origine de l'image
imgBackWidth = getOriginalImageSize(img)[0];
// Récupération de la taille de l'image en premier plan
imgFrontWidth = Number(imgFront.attr("width"));
// Calcul des positions
topPos = imgFront.offset().top;
imgFrontMarginLeft = -Math.floor((imgFrontWidth + borderSize * 2)/2);
imgBackMarginLeft = -Math.floor((imgBackWidth + borderSize * 2)/2);
// Création d'un clone
imgBack = imgFront.clone();
imgBack.css({position: 'absolute', marginLeft: imgBackMarginLeft + 'px', 'top': topPos + 'px', 'left': '50%', 'opacity': 0})
imgBack.attr("src", img.attr("src"));
imgBack.attr("id", imgFrontId + "Back");
// Fondu enchainé
imgFront.css({position: 'absolute', marginLeft: imgFrontMarginLeft + 'px', 'top': topPos + 'px', 'left': '50%'}).after(imgBack).animate({opacity: 0}, 500);
imgBack.animate({opacity: 1}, 500, function deleteImage() {
imgFront.remove();
imgBack.attr("title", description);
imgBack.attr("alt", description);
imgBack.attr("id", imgFrontId);
inProgress = false;
});
});
});
// Permettre le chaînage par jQuery
return this;
};
})(jQuery); |
