Как таскать и зумит большую картинку в div overflow:hidden?

Question

[Капитан Какао]

Всем доброго утра, есть картинка карты жилого посёлка, она большая там что-то типа 8000px на 5000px
Мне её нужно вставить в див и сделать так, что бы человек мог приблизить её, отдалить, и скролить, а лучше таскать курсором влево право что бы она перемещалась (типа как пальцем на планшете).
Добиться эффекта скрола можно и на чистом css через overflow:auto:
А вот как её зумить и таскать курсором, вот это вопрос.
Подскажите как это реализовать, или возможно есть готовые библиотеки для этого.



Пример кода: jsfiddle.net/ds9q4h2c

Answer 1

[littleguga]

Вот тут написал Вам код. За границы не выходит, зум по скроллу мышки и вообще всё замечательно.

Full screen для теста

upd:
Переписал код, теперь он стал получше. Правда без зума:
https://jsfiddle.net/littleguga/jveaparp/1/

Comments

[Капитан Какао]

Спасибо, в целом всё как нужно, но на самом деле картинка на много больше, и хотелось бы иметь возможность её зумить. Если это возможно конечно допилить.
jsfiddle.net/ryfds5zf/3

[littleguga]

Rad Cor: так я сделал zoom. По колесику мышки.

[Капитан Какао]

littleguga: действительно. А мне в начале показалось что по колёсику прокручивает просто)
Тогда такой вопрос, как увеличить интенсивность зума? Что бы при скроле картинка шустрей приближалась и отдалялась

[littleguga]

Rad Cor: в функции zoom() поиграйтесь с коэфицентами 0.5 и 0.8

var new_h = this.clientHeight - delta*0.5;
    var new_w = this.clientWidth - delta*0.8;

[Капитан Какао]

littleguga: ага, понял. Только как оказалось оно уменьшает/увеличивает картинку при скроле только по вертикали, по горизонту она всегда одинаковая по ходу.

[littleguga]

Rad Cor: Можно добавить scale transform. Если надо, могу позже сделать

[Капитан Какао]

littleguga: если не сложно, был бы признателен.

[littleguga]

Rad Cor: что-то я затормозил, разницы нет. Делать scale или менять ширину картинки. Чем не устраивает такой вариант? По горизонтали он тоже меняет вот со scale

[littleguga]

Rad Cor: обновил ответ. Теперь там крутое решение.

[littleguga]

Rad Cor: если помогло - отметьте решением, пожалуйста. Время все таки потратил

[Капитан Какао]

littleguga: супер, спасибо большое!)

[Капитан Какао]

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

[littleguga]

Rad Cor: вот так. Надо убрать событие onwheel и function zoom()

[littleguga]

Rad Cor: переписал скрипт, правда уже без зума. Но тут код точно получше будет)
https://jsfiddle.net/littleguga/jveaparp/1/