| ||||||
|
Просмотр в новом окне увеличенной части изображения при наведении курсора мыши. Multi-Zoom 2.1.Информация, представленная в этой статье ориентирована в первую очередь для начинающих web-мастеров. На двух страницах. Страница 1. На следующую >>>Просмотр одиночного изображенияЭтот скрипт позволяет просматривать увеличенную часть любого изображения при наведении курсора мыши. Область увеличения появляется рядом в новом окне. Пользователь может изменять масштаб просматриваемой части при помощи колесика мыши. Скрипт можно применять для просмотра занимающих много места на экране монитора фотографий или других изображений с большим количеством деталей.
Особенности сценарияСкрипт дает возможность просмотра оригинального изображения или увеличенного. Настройки позволяют изначально показать изображение с низким разрешением масштабируемого изображения на странице, а также использовать более высокое разрешения для отображения изображений в подробности, когда оно увеличивается. «Увеличенное» изображение в новом окне загружается только по требованию (в первый раз, когда пользователь перемещает курсор мыши на его масштабируемое изображение), экономя в начальный момент время загрузки страницы. Поддержка дополнительной настройки. Когда эта функция включена, пользователь может настроить уровень масштабирования по требованию с помощью колесика мыши в то время как она находится на изображении. Можно производить настройку размеров видимой области увеличенного изображения, а также его положение - слева, справа. Можно указать, следует ли показывать «увеличительное стекло» на масштабируемом изображении, которое изолирует область увеличения при наведении курсора мыши на него. В файле стилей можно менять настройки «увеличительного стекла», такие как: границы, цвет фона, размеры и т.д.
Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через 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. На следующую >>> |
|||||
|