Как сделать перемещение и зумирование большой картинки в браузере?

Question

[blog3d]

Есть сайт портфолио по дизайну. Работы довольно большие(много мелких деталей). Например по 2000 пикс. Нужно сделать чтобы при открытии работы на отдельной странице, можно было:
1. Захватом мыши перемещаться по ней (нажал-двигаешь)
2. Зумирование картинки. Лучше всего несколько кнопок(50%, 75%, 100%) либо колесиком мыши.

Можно понять, что нужно на примере любых карт(яндекс или гугл). Тот же принцип что и зумирование - перемещение, что нужно.
Все галереи работают со всплывающими окнами, что никак не подходит.

Comments

[Андрей Мывреник]

Какое это имеет отношение к Java?

[blog3d]

исправил

Answer 1

[Егор Федосенко]

Не Java а JavaScript.
Попробуйте поискать вот такие вот плагины: magiczoom

Answer 2

[Никита]

Браузер в паре с js плохо рендерят картинки. Используйте canvas

Comments

[blog3d]

Может подскажете пример реализации?

[Никита]

пример реализации к сожалению нет. но посмотрите суть ramech.net/courses/html5-canvas/lesson-04-images.html

[Егор Федосенко]

Никита: Зачем рендерить? Достаточно создать несколько уменьшенных копий изображений и не изобретать велосипедов с canvas

[blog3d]

Егор Федосенко: а можно несколько подробнее? разбить изображение на несколько небольших, а что дальше?

[Егор Федосенко]

blog3d: а дальше использовать плагин, пример которого я скинул выше :)
При наводке на уменьшенную копию просто подгружается div с большим изображением. Все очень просто.
Так же можно сделать 50% и 75%, просто заменой display: none; у нужных элементов

[Никита]

Егор Федосенко: тоесть вы хотите загружать на страницу разные копии картинок, тем самым увеличивать ее вес до пары тон?

[Егор Федосенко]

Никита: а вы знали, что если у объекта display: none; то браузер его не подгружает? Тем самым он его подгрузит тогда, когда появится свойство display: block;
А вы хотите с помощью canvas убить браузер пользователя?

[Никита]

Егор Федосенко: canvas убьет браузер пользователя? не смешите меня. А по поводу дислпэй нон бред, сравните размер страницы с дислей нон и с блок. Размер страницы не увеличиться, но сэкономиться время на отрисовке изображения. Сейчас в браузерах стоят препроцессоры которые во время получения страницы пытаются максимально быстро загрузить все src документа.

[Никита]

Оговорка - на большинстве браузеров так

[Егор Федосенко]

Никита: canvas убьет браузер пользователя, если как объяснял ТС, у него портфолио, соответственно работ будет куча на одной странице. Вы хотите сказать, что мне браузер подгрузит изображение с display: none?

[Никита]

Егор Федосенко: проверьте размеры страниц )

[Егор Федосенко]

Никита: прошу прощения. Все это время в голове я у себя имел ввиду элемент, который содержит у себя аттрибут style background который подгружает изображение. Выражался я совсем неверно, вы правы.
Но если задавать именно через свойство css изображение + display none, то оно не подгружается.

[blog3d]

Я возможно не совсем верно понимаю решение. C масштабом я понял, через display none. А вот с перемещением по картинке не совсем. Эффект должен быть именно как при работе с картой. Нажал на карту(на весь экран развернута). Затем потянул курсор - карта двигает за курсором.
Мне кажется тут что-то совсем простое.

[blog3d]

Пример: hotdot.pro/portfolio/gf/#