[XSLT] Insertion ok d'un plugin jQuery en html, mais pas en xsl -> ?

**souffle56** · 30/03/2010, 00h16

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)

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Morbo** · 30/03/2010, 12h42

C'est parcequ'il y a des < dans ton javascript qui ont également un sens en XML et ne sont pas autorisé sous cette forme ('<' n'est permis que pour commencer une balise, sinon il faut utiliser '<').
Le plus simple c'est de faire ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<script type="text/javascript">
//<![CDATA[
 
//]]>
</script>

Et de mettre tout le code javascript à l'intérieur.
Ca définit ce noeud XML comme"texte brute à ne pas interprété en xml".

**souffle56** · 04/04/2010, 22h38

Salut Morbo,
Après une période de "fin d'hibernation quelque peu prolongée", j'ai pu enfin reprendre les essais et... effectivement, c'est exactement cela : Si je place le code javascript tel quel, le navigateur croit qu'il a à faire à des balises ordinaires -> du coup, c'est bien effectivement la solution de mettre le javascript entre les lignes de code que tu m'as proposé

A présent, ça marche nickel-chrome !

Merci à toi, l'ami !

(Rézolu !)

[XSLT] Insertion ok d'un plugin jQuery en html, mais pas en xsl -> ?

XSL/XSLT/XPATH XML

Discussions similaires

Partager

Partager