Hallo,
ich habe mir die scriptaculus-js ordner runtergeladen und möchte damit ein Auswahlfenster über ein Bild schieben.
So wenn ich mein Script local teste funktioniert alles einwandfrei. Wenn ich es aber auf dem Server probiere, scheint die scriptaculous.js nicht zu greifen, obwohl die versionen Lokal und Server eins zu eins identisch sind. Wenn ich die Linksm die auf die js-Resourchen verweisen, teste, dann funktionieren die auch.
hier noch der Code:
Nachtrag: Wenn ich lokal die Onlineresourcen nehme, dann klappt es da auch nicht
ich habe mir die scriptaculus-js ordner runtergeladen und möchte damit ein Auswahlfenster über ein Bild schieben.
So wenn ich mein Script local teste funktioniert alles einwandfrei. Wenn ich es aber auf dem Server probiere, scheint die scriptaculous.js nicht zu greifen, obwohl die versionen Lokal und Server eins zu eins identisch sind. Wenn ich die Linksm die auf die js-Resourchen verweisen, teste, dann funktionieren die auch.
hier noch der Code:
Code:
<script src="http://test.de/Script/vz/include/js/bildbearbeitung/prototype.js" type="text/javascript"></script>
<script src="http://test.de/Script/vz/include/js/bildbearbeitung/scriptaculous.js" type="text/javascript"></script>
<script src="http://test.de/Script/vz/include/js/bildbearbeitung/cropper.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
function onEndCrop( coords, dimensions ) {
$( 'x1' ).value = coords.x1;
$( 'y1' ).value = coords.y1;
$( 'x2' ).value = coords.x2;
$( 'y2' ).value = coords.y2;
$( 'width' ).value = dimensions.width;
$( 'height' ).value = dimensions.height;
}
// example with a preview of crop results, must have minimumm dimensions
Event.observe(
window,
'load',
function() {
new Cropper.ImgWithPreview(
'testImage',
{
minWidth: 100,
minHeight: 150,
ratioDim: { x: 100, y: 150 },
displayOnInit: true,
onEndCrop: onEndCrop,
previewWrap: 'previewArea'
}
)
}
);
</script>
<style type="text/css">
label {
clear: left;
margin-left: 50px;
float: left;
font-size: 12px;
}
#testWrap {
width: 500px;
float: left;
margin: 20px 0 0 50px; /* Just while testing, to make sure we return the correct positions for the image & not the window */
}
#previewArea {
margin: 20px 0 0 20px;
float: left;
}
#results {
clear: both;
}
</style>
</head>
<body>
<br /><br />
<div id="testWrap">
<img src="test.jpg" alt="test image" id="testImage"/>
</div>
<div id="previewArea"></div>
<div id="results">
<p>
<label for="x1">x1:</label>
<input type="text" name="x1" id="x1" />
</p>
<p>
<label for="y1">y1:</label>
<input type="text" name="y1" id="y1" />
</p>
<p>
<label for="x2">x2:</label>
<input type="text" name="x2" id="x2" />
</p>
<p>
<label for="y2">y2:</label>
<input type="text" name="y2" id="y2" />
</p>
<p>
<label for="width">width:</label>
<input type="text" name="width" id="width" />
</p>
<p>
<label for="height">height</label>
<input type="text" name="height" id="height" />
</p>
</div>Nachtrag: Wenn ich lokal die Onlineresourcen nehme, dann klappt es da auch nicht
