Bonjours à tousse
Depuis quelque temps, je développe un album photo php+ajax. Seulement, je souhaite pouvoir zoomer/dézoomer la photo. Pour cela, je voulais faire un rond déplaçable sur une certaine longueur ( un peu comme un drag & drop), plus la longueur est grande, plus le zoom de la photo est fort.
Un gros souci m'est survenu, et je n'arrive pas à y remédier. c'est pour cela que je fait appel à vous.
En effet, le rond déplaçable, ne peut être déplacé qu'une seul foi bien que l'utilisateur souhaite peut être encore modifier le zoom ...
Voici mon code javascript :
var onSizeSlider = false ;
var onSizeSliderDelta = 0 ;
function sizeSliderMouseDown ()
{
var defaultXcursorPosition = cursor_Xposition-20 ;
var defaultSliderPosition = document.getElementById("sizeSlider").style.left ;
onSizeSliderDelta = defaultXcursorPosition-defaultSliderPosition ;
onSizeSlider = true ;
return false ;
}
window.onmouseup = function ()
{
onSizeSlider = false ;
}
var cursor_Xposition = 0 ;
var cursor_Yposition = 0 ;
window.onmousemove = setCursor_position;
function setCursor_position(mouseEvent)
{
cursor_Xposition = mouseEvent.pageX ;
cursor_Yposition = mouseEvent.pageY ;
if ( onSizeSlider ) {
var position = cursor_Xposition-onSizeSliderDelta ;
if ( position >= 0 && position <= 86 )
document.getElementById("sizeSlider").style.left = position+"px" ;
}
}
et enfin, la structure du slide :
<div id="slide">
<div id="sizeSlider" onmousedown="sizeSliderMouseDown();" onclick="return false;"></div>
</div>
#slide fait 100px de largeur, #sizeSlider est en fait le rond déplaçable et fait 14px de hauteur et largeur.
l'effet voulu, est que le rond soit déplaçable lorsque l'utilisateur maintient le bouton gauche de la souri enfoncé. Seulement, cela ne marche qu'un foi, et ensuite, le rond n'est plus déplaçable ...
Je vous remercie d'avance de votre attention et de votre aide éventuel à mon souci.
ps : (veuillez m'excuser des éventuel faute d'orthographe(s) commise(s) bien que j'ai fais attention.
Depuis quelque temps, je développe un album photo php+ajax. Seulement, je souhaite pouvoir zoomer/dézoomer la photo. Pour cela, je voulais faire un rond déplaçable sur une certaine longueur ( un peu comme un drag & drop), plus la longueur est grande, plus le zoom de la photo est fort.
Un gros souci m'est survenu, et je n'arrive pas à y remédier. c'est pour cela que je fait appel à vous.
En effet, le rond déplaçable, ne peut être déplacé qu'une seul foi bien que l'utilisateur souhaite peut être encore modifier le zoom ...
Voici mon code javascript :
var onSizeSlider = false ;
var onSizeSliderDelta = 0 ;
function sizeSliderMouseDown ()
{
var defaultXcursorPosition = cursor_Xposition-20 ;
var defaultSliderPosition = document.getElementById("sizeSlider").style.left ;
onSizeSliderDelta = defaultXcursorPosition-defaultSliderPosition ;
onSizeSlider = true ;
return false ;
}
window.onmouseup = function ()
{
onSizeSlider = false ;
}
var cursor_Xposition = 0 ;
var cursor_Yposition = 0 ;
window.onmousemove = setCursor_position;
function setCursor_position(mouseEvent)
{
cursor_Xposition = mouseEvent.pageX ;
cursor_Yposition = mouseEvent.pageY ;
if ( onSizeSlider ) {
var position = cursor_Xposition-onSizeSliderDelta ;
if ( position >= 0 && position <= 86 )
document.getElementById("sizeSlider").style.left = position+"px" ;
}
}
et enfin, la structure du slide :
<div id="slide">
<div id="sizeSlider" onmousedown="sizeSliderMouseDown();" onclick="return false;"></div>
</div>
#slide fait 100px de largeur, #sizeSlider est en fait le rond déplaçable et fait 14px de hauteur et largeur.
l'effet voulu, est que le rond soit déplaçable lorsque l'utilisateur maintient le bouton gauche de la souri enfoncé. Seulement, cela ne marche qu'un foi, et ensuite, le rond n'est plus déplaçable ...
Je vous remercie d'avance de votre attention et de votre aide éventuel à mon souci.
ps : (veuillez m'excuser des éventuel faute d'orthographe(s) commise(s) bien que j'ai fais attention.