Просмотр в малом окне изображения бо́льшего размера.
Simple Image Panner and Zoomer.

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

Описание

«Simple Image Panner and Zoomer» позволяет с целью экономии места осуществить показ изображений или фотографий, занимающих относительно больш́ую площадь экрана монитора компьютера, в окне с гораздо меньшими, ограниченными по вашему выбору, размерами.

Возможность просмотра всей площади изображения достигается применением эффекта перетаскивания и панорамирования внутри блока.

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

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

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

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

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

Шаг 1.  Закачайте содержимое папок images и js в соответствующие одноименные папки своего сайта, которые расположены в корневой папке сайта.

Шаг 2.  Нижеприведенный код - это пропись стилей. Его необходимо добавлять либо в раздел head на странице вашего сайта, либо скопировать и добавить в файл style.css сайта.

<style type="text/css">

.pancontainer
{
position: relative;
width: 500px; 
height: 300px;
overflow: hidden; 
border: 1px solid black;
}

.gross
{
width: 2360px;
height: 1652px; 
}
 
</style>

          Определите размер видимой области изображения, указав размеры width и height (например: 500px на 300px).

          Истинные размеры большого изображения (например: 2360px на 1652px).

Шаг 3.  Подключение jQuery и скриптов (можно располагать, как в head, так и в body):

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/imagepanner.js"></script>

Шаг 4.   Определитесь с основным изображением myimage.jpg (находится в папке images). Выберите нужное большое изображение с произвольными размерами, которое впоследствии будет показываться в малом окне. Присвойте ему класс, например, .gross, и размеры изображения впишите в стилях для .gross (width: 2360px; height: 1652px;), а его название(myimage.jpg) впишете в этот код, который будет вмонтирован в body:

<div class="pancontainer" data-orient="center" data-canzoom="yes">
<img class="gross" src="images/myimage.jpg" alt="">
</div>

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

          Изображение внутри DIV с CSS классом = pancontainer.

          Эта часть кода отвечает за возможность масштабирования изображения. Если нет желания использовать такую возможность, просто удалите выделенный отрезок кода.

          Файл изображения с большими размерами.

Настройки в файле imagepanner.js

В папке js откройте файл imagepanner.js. Внизу показан участок кода и настройка масштабирования:

magnifyicons: ['images/magnify.gif','images/magnify2.gif', 24,23], 
maxzoom: 4, 

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

          maxzoom: - установка максимального уровня масштабирования (начинать с 1).

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

Для выравнивания изображения добавьте в код css свойство margin, чтобы изображение выравнивалось по центру страницы установите margin: 0 auto;

.pancontainer
{
position: relative;
width: 500px; 
height: 300px;
overflow: hidden; 
border: 1px solid black;
margin: 0 auto;
}

Думаю, что объяснил нормально и понятно для всех. Если есть какие-либо замечания, пишите в комментариях. Успехов Вам в реализации задуманного и удачи! Ваш L.M.