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

Просмотр группы изображений

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

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

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

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

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

Шаг 1: Код для вставки в 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($){
    $('#multizoom1').addimagezoom({ 
		descArea: '#description', 
		speed: 1500, 
		descpos: true, 
		imagevertcenter: true, 
		magvertcenter: true, 
		zoomrange: [3, 7],
		magnifiersize: [350,350],
		magnifierpos: 'right',
		cursorshadecolor: '#fdffd5',
		cursorshade: true 
	});
})
</script>

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

          Атрибут «speed» - скорость открытия средней величины масштабируемого изображения (speed: 1500 - 1.5 секунды).

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

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

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

          Атрибут «cursorshadecolor» - цвет тени «лупы» или «увеличительного стекла».

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

Шаг 2: Код для вставки в body:

<div class="targetarea" style="border: 1px solid #eee;">
<img id="multizoom1" alt="zoomable" title="" src="images/kremlsmall.jpg">
</div>
<div id="description">Москва. Кремль</div>
<div class="multizoom1 thumbs">
<a href="images/kremlsmall.jpg" data-large="images/kreml.jpg" 
data-title="Москва.Кремль"><img src="images/kreml_tmb.jpg" alt="Кремль" 
title="Москва.Кремль"></a> 
<a href="images/morosovasmall.jpg" data-large="images/morosova.jpg" 
data-title="Суриков. Боярыня Морозова"><img src="images/morosova_tmb.jpg" 
alt="Боярыня Морозова" title="Боярыня Морозова"></a> 
<a href="images/blackpantersmall.jpg" data-large="images/blackpanter.jpg" 
data-title="Наоми Кэмпбелл"><img src="images/blackpanter_tmb.jpg" 
alt="Наоми Кэмпбелл" title="Наоми Кэмпбелл"></a> 
<a href="images/strelezsmall.jpg" data-large="images/strelez.jpg" 
data-title="Суриков. Утро стрелецкой казни"><img src="images/strelez_tmb.jpg" 
alt="Суриков. Утро стрелецкой казни" title="Утро стрелецкой казни"></a>
</div>

Спасибо, что посетили мой сайт. Крепкого здоровья и успехов! L.M.