Un script dans une fenêtre modale ?
Bonjour,
Mes nerfs vont lâcher sur un problème et j'aimerais que vous m'aidiez à en trouver l'origine si possible.
J'essaie de raisonner de façon efficace, j'ai 2 pages : celle à partir de laquelle j'ouvre ma fenêtre modale en cliquant sur un bouton, et celle qui contient mon script pour creer une miniature (à partir d'une image : on la bouge dans un cadre comme sur facebook). La première fonctionne car elle m'ouvre une fenêtre modale avec le cadre contenant la photo sauf qu'il est impossible de la déplacer dans cadre, la deuxième fonctionne quand elle n'est pas appeler dans une fenêtre modale (déplacement de la photo dans le cadre).
D'où est-ce que peut venir le problème ? :(
PS: Voilà la page que j'essaie d'appeler dans la fenêtre modale, le script marche ne vous embêtez pas avec, c'est peut-être la disposition qui pose problème ?
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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>FaceBook Style Cropping</title>
<style>
*{
margin:0;
padding:0;
}
#cont{
width:200px;
background-color:red;
text-align:center;
padding-top:5px;
}
#crop-holder {
width:50px;
margin: 0px auto 0px auto;
border:1px blue solid;
}
#crop-iholder {
height:50px;
width:50px;
overflow:hidden;
cursor:move;
}
input {
font-size:0,5em;
}
</style>
<script type="text/javascript" src="facebook-cropping-mootools_fichiers/mootools-1_002.js"></script>
<script type="text/javascript" src="facebook-cropping-mootools_fichiers/mootools-1.js"></script>
</head>
<body>
<div id="cont">
<div id="crop-holder">
<div id="crop-iholder">
<img style="height: 83px;" id="imgPhoto" src="testmoocrop.jpg">
</div>
</div>
<form method="post" action="crop facebox.php">
<input value="1" id="hdnInpTop" type="hidden" name="cut_from_top">
<input value="-29" id="hdnInpLeft" type="hidden" name="cut_from_left">
<input value="Save Thumbnail Version" type="submit">
</form>
</div>
<script type="text/javascript">
//<![CDATA[
var cropImage = function(target, container, coordinateContainer, topCoord, leftCoord){
var img = $(target);
var imgSizeRatio = img.getSize().x / img.getSize().y;
var desiredRatio = (83) / (68);
if (imgSizeRatio > desiredRatio) {
img.setStyle('height','83px'); // redimensionnement css à corriger
}else{
img.setStyle('width','68px');
}
var myDragScroller = new Drag(container, {
snap:0,
style: false,
invert: true,
modifiers: {x: 'scrollLeft', y: 'scrollTop'},
onComplete: function(el){
var cropCutFromTop = img.getCoordinates($(coordinateContainer)).top;
var cropCutFromLeft = img.getCoordinates($(coordinateContainer)).left;
$(topCoord).set('value',cropCutFromTop);
$(leftCoord).set('value',cropCutFromLeft);
}
});
}
window.addEvent('load', function(){ // important do not use domReady since we want the image to be loaded
document.ondragstart = function (){ // fn cropImage modifie la valeur des input hdnInpTop et hdnInpLeft dés que l'image est déplacée
return false;
}; //IE drag hack
cropImage('imgPhoto', 'crop-iholder', 'crop-holder', 'hdnInpTop', 'hdnInpLeft');
});
//]]>
</script>
</body></html> |
