[XSLT] Insertion ok d'un plugin jQuery en html, mais pas en xsl -> ?
Bonjour,
Voilà ce qui m'arrive: J'ai récupéré le code du plugin "jQuery Image Resize Plugin" (redimensionnement automatique d'une image) à cette adresse, et si je l'insère sur une page en HTML (extension .htm), ca marche très bien ! (voir code HTML ci-dessous)
Seulement, voilà, si je l'insère sur une page XSL, c'est plus ça du tout (l'écran affiche "Warning: DOMDocument::load() [domdocument.load]: StartTag: invalid element name...", autrement dit, si j'ai bien compris (?), le navigateur trouve un problème de balise à la ligne de code "if(reduce < 1) {", c'est à dire, là où il n'y a pas de balise, mais simplement le signe "<" correspondant à la procédure jQuery) :fleche: Comment puis-je faire, SVP, pour que l'intégration de ce plugin puisse se faire sur la page XSL ?
En vous remerciant par avance pour toute suggestion que vous pourriez me faire !
Code version HTML: (qui fonctionne !)
Code:
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
| <html>
<head>
<title>Images</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://souffle56.fr/Site/1-Trouver_les_ressources/Ressources/Selection_perso/jquery-1.4.js">
</script>
<script type="text/javascript">
(function($) {
$.fn.resize = function(options) {
var settings = $.extend({
scale: 1,
maxWidth: null,
maxHeight: null
}, options);
return this.each(function() {
if(this.tagName.toLowerCase() != "img") {
// Only images can be resized
return $(this);
}
var width = this.naturalWidth;
var height = this.naturalHeight;
if(!width || !height) {
// Ooops you are an IE user, let's fix it.
var img = document.createElement('img');
img.src = this.src;
width = img.width;
height = img.height;
}
if(settings.scale != 1) {
width = width*settings.scale;
height = height*settings.scale;
}
var pWidth = 1;
if(settings.maxWidth != null) {
pWidth = width/settings.maxWidth;
}
var pHeight = 1;
if(settings.maxHeight != null) {
pHeight = height/settings.maxHeight;
}
var reduce = 1;
if(pWidth < pHeight) {
reduce = pHeight;
} else {
reduce = pWidth;
}
if(reduce < 1) {
reduce = 1;
}
var newWidth = width/reduce;
var newHeight = height/reduce;
return $(this)
.attr("width", newWidth)
.attr("height", newHeight);
});
}
})(jQuery);
$(document).ready(function(){
$("#idimage").resize({maxHeight: 100});
});
</script>
</head>
<body bgcolor="#FFFFFF">
<div id="image">
<img id="idimage" src="http://naturendanger.canalblog.com/albums/especes_animales_en_voie_de_disparition_ou_protegees/m-Dauphins.jpg"/>
</div>
</body>
</html> |
Code PHP: (que j'utilise pour lancer la procédure XML/XSL)
Code:
1
2
3
4
5
6
7
8
9
10
11
| <?php
$xslDoc = new DOMDocument();
$xslDoc->load("XSL.xsl");
$xmlDoc = new DOMDocument();
$xmlDoc->load("XML.xml");
$proc = new XSLTProcessor();
$proc->importStylesheet($xslDoc);
echo $proc->transformToXML($xmlDoc);
?> |
Code XML: (pour info)
Code:
1
2
3
4
5
6
7
| <?xml version="1.0" encoding="UTF-8"?>
<enregistrements>
<titre>Dauphins
<image>http://naturendanger.canalblog.com/albums/especes_animales_en_voie_de_disparition_ou_protegees/m-Dauphins.jpg</image>
</titre>
</enregistrements> |
Code XSL:
Code:
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
| <?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html"
encoding="utf-8"
doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Images</title>
<script type="text/javascript" src="http://souffle56.fr/Site/1-Trouver_les_ressources/Ressources/Selection_perso/jquery-1.4.js">
</script>
<script type="text/javascript">
(function($) {
$.fn.resize = function(options) {
var settings = $.extend({
scale: 1,
maxWidth: null,
maxHeight: null
}, options);
return this.each(function() {
if(this.tagName.toLowerCase() != "img") {
// Only images can be resized
return $(this);
}
var width = this.naturalWidth;
var height = this.naturalHeight;
if(!width || !height) {
// Ooops you are an IE user, let's fix it.
var img = document.createElement('img');
img.src = this.src;
width = img.width;
height = img.height;
}
if(settings.scale != 1) {
width = width*settings.scale;
height = height*settings.scale;
}
var pWidth = 1;
if(settings.maxWidth != null) {
pWidth = width/settings.maxWidth;
}
var pHeight = 1;
if(settings.maxHeight != null) {
pHeight = height/settings.maxHeight;
}
var reduce = 1;
if(pWidth < pHeight) {
reduce = pHeight;
} else {
reduce = pWidth;
}
if(reduce < 1) {
reduce = 1;
}
var newWidth = width/reduce;
var newHeight = height/reduce;
return $(this)
.attr("width", newWidth)
.attr("height", newHeight);
});
}
})(jQuery);
$(document).ready(function(){
$("#idimage").resize({maxHeight: 100});
});
</script>
</head>
<body bgcolor="#FFFFFF">
<div id="image">
<img id="idimage" src="http://naturendanger.canalblog.com/albums/especes_animales_en_voie_de_disparition_ou_protegees/m-Dauphins.jpg"/>
</div>
</body>
</html> |
