Рекомендовать карту

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

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

На двух страницах.  Страница 1.  На следующую >>>

Описание

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

Демо-пример



Исходники (1.2 мб)

Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.

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

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

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

В полученном вами примере «Jquery Image Magnify v1.11» будет работать только при включенном Интернете, так как файл последней версии библиотеки jQuery - «jquery.min.js» загружается с сайта Google API.

Если Вы желаете, чтобы всё работало автономно, скачайте и подключите последнюю версию библиотеки jQuery с официального сайта.

Если у Вас уже подключена библиотека jQuery последней или более поздней версии (на момент публикации статьи - версия 3.1.1) или Вы используете удаленное подключение последней версии с сайта jQuery или Google API, разумеется, вторично подключать её не стоит.


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

Шаг 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.magnifier.js


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 (белый) или любой другой, который Вам подходит по теме. Вот и всё!


На двух страницах.  Конец страницы 1.  На следующую >>>

Ваше мнение по материалу, изложенному на сайте




  © 2015–2024  dynamic-site.olerant.ru  L.M. Служба поддержки Яндекс.Метрика