ZooMove - масштабирование изображений

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

 

Совместимость: jQuery 1.7+, Chrome 42+, Firefox 41+, Safari 9+, Opera 29+, Internet Explorer 9+

 

Использование

Для использования плагина подключаем файл со стилями zoomove.min.css, библиотеку jQuery и скрипт плагина.

<link rel="stylesheet" href="css/zoomove.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="zoomove.min.js"></script>

 

Теперь подготовим наши изображения для ZooMove


<!-- Item image -->
<figure class="zoo-item" zoo-image="img/example.jpg"></figure> 
 
<!-- Starting the ZooMove -->
<script>
   $('.zoo-item').ZooMove();
</script>

 

Ещё варианты разметки:


<!-- Image 1 | По умолчанию -->
<figure class="zoo-item" zoo-image="img/example.jpg"></figure>
 
<!-- Image 2 | Значение масштаба "3" (300%) -->
<figure class="zoo-item" zoo-image="img/example.jpg" zoo-scale="3"></figure>
 
<!-- Image 3 | Over "true" and Move "false" -->
<figure class="zoo-item" zoo-image="img/example.jpg" zoo-over="true" zoo-move="false"></figure>

Опции

  • zoo-image- url картинки для отображения 
  • zoo-scale - устанавливает размер зума, который будет применен к картинке, по умолчанию 1.5 (150%) 
  • zoo-move - True, если хотите, чтобы картинка двигалась вместе с курсором, по умолчанию true
  • zoo-over - Если true, то изображение может выходить за пределы контейнера, по умолчанию false
  • zoo-cursor - Указываем вид курсора, pointer или default, по умолчанию false

Параметры можно указывать, как в html:


<!-- HTML Element -->
<figure 
class="zoo-item" 
zoo-image="[value]"
zoo-scale="[value]"
zoo-move="[value]"
zoo-over="[value]"
zoo-cursor="[value]"
>
</figure>

Так и при инициализации плагина:


<!-- javascript -->
<script>
   $('.zoo-item').ZooMove({
   image: '[value]',
   scale: '[value]',
   move: '[value]',
   over: '[value]',
   cursor: '[value]'
   });
</script>

СКАЧАТЬСкачек: 295
250 Kb
Кто скачал?

ДЕМОПосмотреть
пример