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

Просмотр в новом окне увеличенной части изображения при наведении курсора мыши. Multi-Zoom 2.1.

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

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

Просмотр одиночного изображения

Этот скрипт позволяет просматривать увеличенную часть любого изображения при наведении курсора мыши. Область увеличения появляется рядом в новом окне. Пользователь может изменять масштаб просматриваемой части при помощи колесика мыши. Скрипт можно применять для просмотра занимающих много места на экране монитора фотографий или других изображений с большим количеством деталей.

Демо-пример

Особенности сценария

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

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

Можно производить настройку размеров видимой области увеличенного изображения, а также его положение - слева, справа.

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


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

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


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

Распакуйте архив в «текущую папку». В распакованном виде папка multizoom содержит папку css с файлом стилей, папку images с изображениями и папку js с ява-скриптами, а также HTML-файл demo.html, открыв который в вашем браузере, можно оценить представляемый эффект.

На этом можно было бы и закончить, так как у вас уже есть всё для того, чтобы реализовать эффект на своём сайте. Осталось подобрать необходимые изображения, закачать содержимое папки multizoom на хостинг (в соответствующие одноименные папки) и уметь делать простейшие настройки. Вот о последних немного в дальнейшем.


Пошаговая инструкция

Шаг 1: Добавьте нижеприведенный код (который также можно скопировать из файла demo.html) в раздел head на странице вашего сайта в корневой папке.

 

<link rel="stylesheet" href="css/multizoom.css" type="text/css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/multizoom.js">
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
   $('#image1').addimagezoom({ 
		zoomrange: [3, 10],
		magnifiersize: [300,300],
		magnifierpos: 'right',
		cursorshade: true,
		largeimage: 'images/sobor.jpg' 
	})

})
</script>


В рассматриваемом примере библиотека jQuery (jquery.min.js), версия 1.3.2, подключается локально. Вы вправе использовать другие варианты подключения. Об этом прочтите здесь.


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

          Атрибут «zoomrange» определяет диапазон зуммирования. (В данном случае минимум - 3, максимум - 10).

          Атрибут «magnifiersize» определяет размер «увеличительного стекла». (В нашем случае - 300x300).

          Атрибут «magnifierpos» определяет позицию окна просмотра в увеличенном виде. (Сейчас задана позиция «right» - справа).

          Атрибут «cursorshade» - буквально «тени курсора». Вариант «true» - будет показываться «увеличительное стекло», «false» - крестик.

          Атрибут «largeimage» - наше большое изображение «sobor.jpg».



Шаг 2: Вставьте этот код в body страницы, на которой будут показываться зуммируемые изображения. Код также можно скопировать из файла demo.html:


<img id="image1" border="0" src="images/soborsmall.jpg" 
style="width: 350px; height: 262px;" alt="">

Здесь простая вставка изображения soborsmall.jpg заданных размеров с id="image1".

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


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

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




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