Увеличение изображения при щелчке мышью. Jquery Image Magnify v1.11.

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

Описание

Скрипт «Jquery Image Magnify v1.11» позволяет увеличивать любое изображение на странице до требуемой величины. Увеличение или возвращение к исходному состоянию происходит при нажатии кнопки мыши наведённой на изображение. Картинка готовится в одном экземпляре с необходимыми размерами и увеличивается в соответствии с настройками в файле jquery.magnifier.js.

После скачивания архива, распакуйте его в текущую папку на компьютере. В папке jQueryImageMagnify вы увидите:

• папку images с шестью изображениями в формате jpg;
• папку js с файлом ява-скрипта jquery.magnifier.js и файлом курсора увеличения magnify.cur (отражается не во всех браузерах!);
• файл с демонстрационным материалом demo.html.

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

Инструкция по установке на сайт (одиночное изображение)

Шаг 1.  Подберите нужное изображение и загрузите его в папку images, которая находится в корневой папке сайта.

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

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

<script type="text/javascript" 
src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script type="text/javascript" src="js/jquery.magnifier.js">
</script>

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

<img src="images/portrait.jpg" 
class="magnify" alt="" style="width: 150px; height: 120px;">

Пояснения:

          Путь к файлу изображения, выбранного вами.

          Размеры изображения до увеличения. Выставляйте их на своё усмотрение.

Проще говоря, в раздел body вы вставляете обычный код изображения, присваивая ему class="magnify". Если изображение содержит явные атрибуты размеров (ширина и высота), то это позволяет пользователю увеличивать изображение соответственно настроек файла скрипта jquery.magnifier.js. Если же размеры не указаны, то реальные размеры изображения будут основой для увеличения.

Смотрим результат:

Вариации с размещением изображений

Здесь мы видим картинки, заведомо расставленные слева и справа в поле страницы. При увеличении они смещаются ближе к центру, занимая свободное место на экране монитора компьютера, что создаёт дополнительный визуальный эффект. Коды смотрите внизу.

<img src="images/paris.jpg" class="magnify" align="left" 
alt="" style="width: 150px; height: 100px;">

<img src="images/paris.jpg" class="magnify" align="right" 
alt="" style="width: 150px; height: 100px;">

Пояснения:

          Позиционирование слева.

          Позиционирование справа.

          Первоначальные размеры изображения могут изменяться с помощью атрибутов width и height.

jQuery.imageMagnify={
dsettings: {
	magnifyby: 5,  //коэффициент 
	увеличения изображения (по умолчанию - 3)
	duration: 500,  // продолжительность 
	анимации в миллисекундах (по умолчанию - 500)
	imgopacity: 0.2  //степень 
	непрозрачности исходного изображения, когда 
	увеличенное изображение покрывает его (по умолчанию - 0,2)

Я специально вынес этот вопрос в отдельный подраздел, так как он возник у одного из посетителей сайта.

Для того, чтобы увеличенная картинка после щелчка мышью отображалась без рамки, нужно:

• Открыть файл jquery.magnifier.js. Сделать это можно в любом текстовом редакторе, но я рекомендую Notepad++
• Найти участок кода (в Notepad++ он будет на 51 строке)
  

  var $clone=$target.clone().css({position:'absolute', left:0, top:0, visibility:'hidden',
   border:'1px solid gray', cursor:'pointer'}).appendTo(document.body)

• В выделенной маркером строке выставить значение border равное нулю, либо изменить цвет gray (серый) на white (белый) или любой другой, который Вам подходит по теме. Вот и всё!