Как сделать перемещение и зумирование большой картинки в браузере?
Есть сайт портфолио по дизайну. Работы довольно большие(много мелких деталей). Например по 2000 пикс. Нужно сделать чтобы при открытии работы на отдельной странице, можно было:
1. Захватом мыши перемещаться по ней (нажал-двигаешь)
2. Зумирование картинки. Лучше всего несколько кнопок(50%, 75%, 100%) либо колесиком мыши.
Можно понять, что нужно на примере любых карт(яндекс или гугл). Тот же принцип что и зумирование - перемещение, что нужно.
Все галереи работают со всплывающими окнами, что никак не подходит.
blog3d: а дальше использовать плагин, пример которого я скинул выше :)
При наводке на уменьшенную копию просто подгружается div с большим изображением. Все очень просто.
Так же можно сделать 50% и 75%, просто заменой display: none; у нужных элементов
Никита: а вы знали, что если у объекта display: none; то браузер его не подгружает? Тем самым он его подгрузит тогда, когда появится свойство display: block;
А вы хотите с помощью canvas убить браузер пользователя?
Егор Федосенко: canvas убьет браузер пользователя? не смешите меня. А по поводу дислпэй нон бред, сравните размер страницы с дислей нон и с блок. Размер страницы не увеличиться, но сэкономиться время на отрисовке изображения. Сейчас в браузерах стоят препроцессоры которые во время получения страницы пытаются максимально быстро загрузить все src документа.
Никита: canvas убьет браузер пользователя, если как объяснял ТС, у него портфолио, соответственно работ будет куча на одной странице. Вы хотите сказать, что мне браузер подгрузит изображение с display: none?
Никита: прошу прощения. Все это время в голове я у себя имел ввиду элемент, который содержит у себя аттрибут style background который подгружает изображение. Выражался я совсем неверно, вы правы.
Но если задавать именно через свойство css изображение + display none, то оно не подгружается.
Я возможно не совсем верно понимаю решение. C масштабом я понял, через display none. А вот с перемещением по картинке не совсем. Эффект должен быть именно как при работе с картой. Нажал на карту(на весь экран развернута). Затем потянул курсор - карта двигает за курсором.
Мне кажется тут что-то совсем простое.
