Просмотр изображения с эффектом увеличительного стекла. Image Power Zoomer v1.1.

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Описание

Бывают случаи, когда Вам хочется присмотреться или более детально рассмотреть интересующее изображение. В реальной обстановке можно воспользоваться лупой или увеличительным стеклом. В виртуальном мире на компьютере можно применить эффект «Image Power Zoomer». С его помощью любое изображение может быть увеличено при наведении указателя мыши. «Увеличительное стекло», которое появляется поверх изображения позволяет пользователю осуществить детальный просмотр. Кроме того, поворачивая колесо мыши назад или вперед, можно добиться увеличения масштаба просматриваемого участка. Стандартный уровень масштабирования (2x) может быть изменен для каждого изображения. Диапазон масштабирования может быть (например: от 2x до 10x). Размер «лупы» также можно изменять для каждого изображения в отдельности.

Распакуйте архив в «текущую папку». В папке ImagePowerZoomer вы увидите:

• папку с изображениями images;
• папку js с яваскриптами;
• файл demo.html.

Откройте последний в вашем браузере и убедитесь в работоспособности демо-примера.

Инструкция по установке

Шаг 1.  Подберите своё изображение. Изображение должно быть большим и с высоким разрешением оригинала, чтобы при просмотре были видны все мелкие детали и подробности. Поместите его в папку images вашего сайта.

Шаг 2.  Содержимое папки js закачайте в одноименную папку, которая находится в корневой папке вашего сайта.

Шаг 3.  Нижеприведенный код ява-скриптов необходимо добавить в раздел head или body вашей страницы:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/ddpowerzoomer.js"></script>
<script type="text/javascript">
 jQuery(document).ready(function($){
  $('#myimage').addpowerzoom({
  defaultpower: 2,
  powerrange: [2,5],
  largeimage: null,
  magnifiersize: [170,170]<--нет запятой после последнего варианта!-->
 })
 })
 </script>

 

Некоторые настройки и пояснения:

          Установка по умолчанию увеличения при наведении указателя мыши на изображение. Значение должно быть целым числом, большим или равным 1.

          Устанавливает диапазон возможного увеличения при прокрутке колесика мыши, когда лупа находится в зоне изображения. В нашем случае диапазон от 2 до 5.

          Устанавливает размеры лупы, которая появляется на изображении. В примере 170x170. По умолчанию - 120x120.

Шаг 4.  А этот код необходимо размещать в разделе body на вашей странице:

 

<img id="myimage" src="images/paris.jpg" style="width: 400px; height: 300px;" alt="">

Пояснения:

          Файл изображения, выбранного вами.

          Размеры изображения. Выставляйте размеры на своё усмотрение. Желательно, чтобы они были меньше, чем оригинальные.

Дополнительный вариант

Хотя, сложно сказать, какой это вариант, может быть и основной... Это кому как удобно. Здесь также нужно выполнить два действия по вставке кода, а третьим действием будут регулировки в файле ddpowerzoomer.js.

Шаг 1.  Код для вставки в раздел head (body):

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/ddpowerzoomer.js">
</script>
<script type="text/javascript">
 jQuery(document).ready(function($){ 
  $('#myimage').addpowerzoom()
 })
 </script>

 

Шаг 2.  Код для вставки в раздел body:

<img id="myimage" src="images/paris.jpg" style="width: 400px; height: 300px;" alt="">

Шаг 3.  Регулировки в файле ddpowerzoomer.js:

Выставляем или изменяем значения известных параметров (выделено). Получается, что это «та же бабушка, но только в другом чепчике».

dsetting: {defaultpower: 2, powerrange:[2,5], magnifiersize:[120, 120]},

Это всё. Успехов в делах праведных! Удачи! Ваш L.M.