как сделать img zoom
 

делаю зум как тут http://rvolve.com/zoom_pic.php, только там на канве, а у меня нет.Так вот делаю так:

function fixedZoom (x,y) {

var top = getHeight / height;//zoom
var left = getWidth / width; 	//zoom

var centerX = elem.width()/2;//центр по Х
var centerY = elem.height()/2;//центр по Y

x = x - coord_elem.left;//координаты мыши относительно блока по X
y = y - coord_elem.top;//координаты мыши относительно блока по Y

x = centerX - x;
y = centerY - y;
console.log(x*left)	 
	 
	 wrapper.css({
		 top: style().top + y*top + 'px',
		 left: style().left + x*left+'px'
		 		
		 })
	
	}

только увелечение не по клику а колесиком
но что как то не так работает http://cyberua.16mb.com/files/zoom.html.
что делаю нет так?

cyber,
При зуме нужно фиксировать текущую координату мыши от лево - и верха Окна Самой внешней обертки overlow
Поэтому расчитываете координаты и относительно wrapper и обертки overlow, - и wrapper cдвигаете - top и -left на величину разницу - между старыми координатами мыши от угла overlow и приращением ширины и высоты (*или уменьшением - тогда получецо авто плюс)

раз 3 прочитал и не совсем понял
т.е отступ с лева - отступ с права?

чет я как то запутался=(

cyber,
Координаты мыши от лева и тоp (cоррь

блин, я наверно запутался но я вроде так и делаю=(

т.е top , left?

т.е top , left - Да

function fixedZoom (x,y) {

var top = getHeight / height;//zoom
var left = getWidth / width; 	//zoom

var centerX = elem.width()/2;//центр по Х
var centerY = elem.height()/2;//центр по Y

x = x - coord_elem.left;//координаты мыши относительно блока по X
y = y - coord_elem.top;//координаты мыши относительно блока по Y

x = centerX - x;
y = centerY - y;
console.log(x*left)	 
	 
	 wrapper.css({
		 top: style().top + y*top + 'px',
		 left: style().left + x*left+'px'
		 		
		 })
	
	}

style().left/top
это значение left/top для wrapper
y/x координаты курсора
я твой алгоритм вроде частично понял (как то запутано написано:)), но не пойму что именно у меня не так

cyber,
Сплю - завтра к после обеда наверно

да сам засыпаю,спокойной ночи)))

а что имеется в виду под старым координатами?

cyber,
Мну тут прикинул - шо про координаты курсора - не АЙС - ща схему набросаю

Нам нужно фиксировать положение центральной точки (желтое O) относительно центра Окна ( хотя в Гугле - обычно фиксируется положение Пойнтера*выделенной метки, если он есть в текущем окне)



Занчит вычисляешь отступы текущего центра и при зумме увеличиваешь на половину приращения ширины lеft(или высоты для top)

Вычисляем приращение:

widthOld = $("#wrapper").width() /это текущая ширина
widthNew = $("#wrapper").width()*zoom /это будущая

DeltaX(Приращение по Left) = (widthOld - widthNew)/2 (знак будет автоматический

Итог вставляем в wrapper{"margin-left":""+DeltaX +"px" }

хм...
спасибо за подсказку, но у тебя не правильно, потому что ты опеределяеш центр относительно wrapper а в моем случае мне нужно центр относительно внешнего блока overflow.
пытался сделать так но что то все едит в верх

function fixedZoom () {

var zoomY = getHeight / (getHeight - step.height);
var zoomX = getWidth / (getWidth - step.width); 	

	var left = style().left*zoomX;
	var top = style().top*zoomY;
	
	 wrapper.css({
		 top: -top  + 'px',
		 left: -left+'px'
		 		
		 })
	
	}

cyber,
Центр должен быть относительно визуального Окна просмотра - а центр wrapper может быть вообще за кадром (при большой ширине и просмотре картинки у левого края (или, наоборот - у края правого)

да, но у тебя получается что расчищается центр wrapper

вот как работает http://cyberua.16mb.com/files/zoom.html
вот функция

function fixedZoom () {

var zoomY = getHeight /(getHeight - step.height);
var zoomX = getWidth / (getWidth - step.width); 	

	var left = ((getWidth - step.width) - (getWidth * zoomX))/2;
	var top = ((getHeight - step.height) - (getHeight * zoomY))/2;
	
	 wrapper.css({
		 top: top  + 'px',
		 left: left+'px'
		 		
		 })
	
	}

может я зум не правильно рассчитываю?!

cyber,
По моему - так
var left = ((getWidth + step.width) - (getWidth * zoomX))/2;
var top = ((getHeight + step.height) - (getHeight * zoomY))/2;

И всё таки тут не left - a margin - left - Движение от зума - лучше делать независимым (для начала

почему так?
если getWidth/Height это размеры после увелечения, значит getHeight - step.height это уже старый размер.
а как тогда его перемещать если оно будет смещено?

cyber,
Ксать я не вижу чобы у тебя серьезно менялся Left - при кручении - колеса походу что то его перебивает

хм...
щас по ишу.
а почему гугл юзает

-webkit-transform: translate(-552px, -64px) scale(1);

а не top/left || margin ?

cyber,
Потому шо удобно разделять

Я ж говорил про маргин и Lеft

Он наверняка left делает по сдвигу карты а по зумм - это
Наверно есть еще и третий вариант сдвига

у гугла при зуме загружается новая картинка.так что у них меняется только
-webkit-transform: translate()

самое странное что у точки не меняются координаты при зуме

cyber,
Еще раз
1. зум - отношение текущей ширины - к изначальной (константе)
2. Выведи алертом (getWidth * zoomX))/2;
Delta X = ($("#wrapper").width() - $("#wrapper").width()*zoom)/2

Эту Дельту(c её знаком) нун добавлять к текущему значению Left

значит у них на сервере все делается

что делается на сервере, хоть поняли что сказали?

зделал так

function fixedZoom () {

var zoomY = getHeight / height;
var zoomX = getWidth / width; 	

var left = ((getWidth - step.width) - (getWidth * zoomX))/2;
var top = ((getHeight - step.height) - (getHeight * zoomY))/2;
	
	 wrapper.css({
		 top: style().top + top  + 'px',
		 left: style().left+ left+'px'
		 		
		 })
	
	}

вот результат
http://cyberua.16mb.com/files/zoom.html
теперь сильно уежает

вывел в консоль

а почему к изначальной?
если расчитуем относительно предыдущей?
значит и зум нужно относительно предыдущей ширины

cyber,
Вроде так - но при большом масштабе - зашкаливает

function fixedZoom () {

var zoomY = getHeight / height;
var zoomX = getWidth / width; 	

	var left =1200*(1 - zoomX)/2;
var top = 1200*(1 - zoomX)/2;

//console.loggetWidth *(1- zoomX)/2)	
	 
	 wrapper.css({
		 top: style().top = top  + 'px',
		 left: style().left= left+'px'
		 		
		 })
	
	}

а что за 1200?

не не правильно работает, при зуме уежает в одну точку и увеличивает в том месте

cyber,
:write: У мну мысли ночью нулевые - ток гадалки...
Понимашь - нужно сначало Алгоритмы потом - скрипты - а нас походу всё наоборот... ни наю пока что нужно сделать

да все мои алгоритм пошли коту под хвост, что я только не пробывал..
я только учусь:cray:
а насчет того что думается тяжело ты прав, пошел я спать=)
спокойно ночи:)

был такой алгоритм:
определяю центр блока и позицию мыши во время увеличения
потом
(left/top + ( центр - позиция мыши))* zoom
но что у меня не получилось реализовать, работало криво

cyber,
Седни пас - завал по работе

да сам за день на мотался, желания 0 уже=)

блин не хрена не получается=(

cyber,
У тьву крайние сроки есть ? (ток не говори что - вчера)