paolo a écrit :
SI tu lis le tuto, tout est expliqué. 3 secondes de recherche m'ont permis de trouver du tout cuit: facebox
C'est vrai que je l'ai pas précisé, j'ai testé plusieurs fois un paquet de tutos (dont celui de developpez.com) sur les fenêtres modales mais voici les seuls qui permettent d'appeler une page externe dans la fenêtre modale :
-
celui de jQuery Tools - Overlay spécialement pour ouvrir une page externe dans l'overlay : la page s'ouvre dans l'overlay mais mon script de redimensionnement (utilisant Mootools) ne fonctionne pas alors qu'il marche quand la page n'est pas appelée dans une fenêtre modale.
-
le tout cuit de Facebox : pareil
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 de redimensionnement. 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 ? (désolé de la balancer comme ça, si ça peut aider):
<!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>
... j'ai installer la librairie et fais un essai comme dans l'exemple mais ça prend pas :
