Как увеличить картинку при нажатии?

Бывают случаи, когда на странице сайта требуется разместить превью изображения. Картинка, выставленная в режиме предварительного просмотра, увеличивается при нажатии, и у пользователя появляется возможность рассмотреть все интересующие его детали. Существует несколько способов сделать такое превью.

Инструкция

Загрузите изображение на сторонний фотохостинг и вставьте на свой сайт нужную ссылку. Зайдите на страницу подходящего вам обменника, и, используя соответствующие кнопки, укажите, откуда будет загружено изображение: из сети интернет или с вашего компьютера. В первом случае скопируйте ссылку на изображение из адресной строки в окне браузера и вставьте ее в предназначенное поле на фотохостинге. Во втором случае нажмите на кнопку «Обзор» и укажите директорию, в которой находится ваша картинка на компьютере. Нажмите на кнопку «Загрузить» и дождитесь окончания операции.

Для того чтобы ваше изображение можно было увеличить по клику мыши, скопируйте ссылку, находящуюся в поле «Превью» («Предварительный просмотр», «Увеличение по клику»), и вставьте ее на свой ресурс. В качестве альтернативы таким подписям могут быть приведены разные варианты размеров картинки. К примеру, для полного размера изображения может стоять значение 600х450, а для превью – 200х150.

Другой вариант: откройте для редактирования страницу своего сайта. В группе «Изображения» на панели опций нажмите на кнопку «Обзор» и укажите путь к изображению, сохраненному на вашем компьютере. Если хотите загрузить сразу несколько картинок, нажмите нужное количество раз на значок [+] и повторите операцию для каждого изображения. Для каждой загруженной картинки будет создан код ($IMAGE1$, $IMAGE2$ и так далее). Он появится правее от кнопки «Обзор» в отдельном поле, вставьте этот код в нужное место страницы.

Правее от поля с кодом станут доступны для редактирования поля с разрешением изображения в виде превью. Укажите, какой высоты и ширины должны быть ваши картинки в режиме предварительного просмотра. По желанию можете дополнительно изменить данные в группе «Максимальные размеры полного изображения». Нажмите на кнопку «Сохранить». Размещенные таким способом превью увеличиваются при нажатии в новой вкладке. Если хотите, чтобы изображение можно было увеличить, не уходя со страницы, вставьте на сайт соответствующий скрипт.

Оцените статью!