Je fais une bannière où vous pouvez redimensionner et faire glisser l'image. Je travaille bien dans jsfiddle. Mais pour une raison quelconque, cela ne fonctionne pas sur ma page Web.Jquery curseur et draggable ne fonctionnent pas
Voici l'exemple jsFiddle:
http://jsfiddle.net/DennisBetman/tnaGA/
Et voici à quoi il ressemble sur ma page Web:
http://jewelbeast.com/posts/imgreplace.html
Donc, si vous pouvez le voir. Le curseur ne fonctionne pas. Et l'image qui sera traînante est bizarre. J'ai appelé le script jquery et jquery ui dans la tête.
Il est le code que j'ai utilisé pour ma page Web.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
div {
width:370px;
height:204px;
position:relative;
overflow:hidden;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
#box{
background:black;
cursor: move;
border: 1px solid black;
}
#hidden-img{
display:none;
}
</style>
</head>
<body>
<div id="box">
<img src="http://www.hdwallpapersarena.com/wp-content/uploads/2013/04/high-resolution-fantasy-woman.jpg" id="hidden-img" />
<img src="http://www.hdwallpapersarena.com/wp-content/uploads/2013/04/high-resolution-fantasy-woman.jpg" id="img" width="371" height="auto" style="top:-0px; left:-0px;" />
</div>
<!-- style="top:-262px; left:-425px;" -->
<div id="zoom"></div>
<input type="hidden" id="amount-width" style="border: 0; color: #f6931f; font-weight: bold;" />
<input type="hidden" id="amount-height" style="border: 0; color: #f6931f; font-weight: bold;" />
<div class="text"></div>
<p>
Position x:
<input type="text" id="val-x" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<p>
Position y:
<input type="text" id="val-y" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<p>
<input type="file" onchange="readURL(this);" />
</p>
<script>
var previousValue = 0;
var hiddenImageWidth = $("#hidden-img").width() - 370;
jQuery("#zoom").slider({
max: hiddenImageWidth,
slide: function(event, ui){
var sliderValue = jQuery("#zoom").slider("value");
jQuery("#img").width(370 + sliderValue);
var pos = $("#img").position(); // returns an object with the attribute top and left
var top = pos.top; // top offset position
var left = pos.left; // left offset position
$("#val-x").val(left);
$("#val-y").val(top);
if (left > 0){
$("#img").css("left",'0px');
}
if (top > 0){
$("#img").css("top",'0px');
}
$("#amount-width").val(jQuery("#img").css("width"));
$("#amount-height").val(jQuery("#img").css("height"));
var width = $("#img").width();
var widthZoom = width + sliderValue;
var widthVerschil = widthZoom - sliderValue;
var totalWidth = widthVerschil - '370';
var height = $("#img").height();
var totalHeight = height - '207';
if (sliderValue < previousValue){
var t, l;
t = $('#img').position().top;
l = $('#img').position().left;
if(t < 0)
t = t + (previousValue - sliderValue);
if(l < 0)
l = l + (previousValue - sliderValue);
$('#img').offset({top: t, left: l});
}
previousValue = sliderValue;
$("#img").draggable({
containment: [-totalWidth, -totalHeight, 0, 0],
scroll: false,
iframeFix: true,
});
$('.text').html('<br/>The file size = ' + height + ' x ' + widthVerschil);
}
});
var height = $("#img").height();
var totalHeight = height - '207';
$("#img").draggable
({
containment: [0, -totalHeight, 0, 0],
snap: false,
drag: function(event, ui)
{
$("#val-x").val(ui.position.left);
$("#val-y").val(ui.position.top);
}
});
$("#img").offset({left: $(this).attr('position')});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img')
.attr('src', e.target.result)
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
</body>
</html>
Vous pouvez voir mon script pour que tout ce qui se passe soit à la fin de mon corps. J'ai essayé de le mettre dans ma tête mais que rien ne marchera, vous ne verrez pas de curseur. ect.
J'ai essayé aussi de placer ces scripts
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
sous ma fonction de script. Mais ça ne marchera pas non plus.
J'espère que quelqu'un verra le problème.
Merci.
Merci pour votre réponse. J'ai essayé cela, mais pour une raison quelconque, il continue d'insister. –
Quand je regarde dans la console et j'essaie d'utiliser le curseur qu'il dit. TypeError Uncaught: Impossible d'appeler la méthode 'addClass' de –
non vérifié Je vérifie le code de votre site Web, je ne vois pas votre code enveloppé dans la fonction prête. D'abord, essayez à nouveau. Ceci est un problème classique, seules les différences entre votre code site et votre jsfiddle sont celles de jsfiddle, le code jquery est enveloppé dans la fonction callback onload et jsfiddle utilise jQuery UI 1.9.2 pas jQuery UI 1.10.3 {même cela ne devrait pas affecter votre code } –