falbar Э-Зум, зум, зум-м-м! Ну, или как мы картинки увеличивали

Э-Зум, зум, зум-м-м! Ну, или как мы картинки увеличивали

25 февраля 2015 3843 8

Алоха! Всем счастья и добра, ну а сегодня наша тема – увеличение картинки (изображения) при клике мышью. Причем, не только простое зумирование, но и его динамическая проработка.

Реклама

Необходимость привлечения всё большего и большего числа потенциальных клиентов сподвигает разработчиков сайтов-рекламщиков, лейдингов, сайтов-портфолио придумывать просто умопомрачительные эффекты, часть из которых собрана в нашем сегодняшнем плагине. Сразу отмечу, плагин далеко не стандартный, при его использовании происходит не просто увеличение картинки (или подгрузка изображения с большим расширением), а создается эффект приближения к ней. Есть различные вариации, как достигнуть такого эффекта: несколько стандартных решений можно увидеть в демо.

На примере текста на ветках хорошо показаны возможности этого скрипта и его особенность. Также можно поместить нужные блоки в контейнер и относительного его применять плагин (зумирование). Такой способ увеличения картинки наверняка привлечёт пользователя.

Теперь рассмотрим пример реализации материалов, прикрепленных к этой статье.

Подключаем скрипты:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.zoomooz.min.js" type="text/javascript"></script>

HTML:

<div id="container">
  <div id="content">
      <object class="tree" data="tree.svg" width="720" height="720" type="image/svg+xml" >
            <embed class="tree" src="tree.svg" width="720" height="720" type="image/svg+xml" />
     </object>
     <div class="label" id="label1">
           An apple does not fall far from the tree.
       </div>
        <div class="label" id="label2">
           Who reaches for the spruce, falls down onto the juniper.
        </div>
    </div>
</div>

В эту структуру входит обёртка, при клике по которой будет возвращаться исходное состояние id=container. У блоков с текстом добавлен class=label, по клику по нему скрипт будет создавать эффект приближения. Контейнер с id=content используется для отцентровки содержимого относительно окна браузера у пользователя.

CSS стили следующие:

#container{
   width: 100%;
    height: 100%;
   overflow: hidden;
   background-color: white;
}
#label1{
   left: 160px;
    top: 105px;
 width: 90px;
    -webkit-transform: rotate(20deg);
   -moz-transform: rotate(20deg);
}
#label2{
 left: 460px;
    top: 285px;
 width: 150px;
   -webkit-transform: rotate(-15deg);
  -moz-transform: rotate(-15deg);
}
div.label{
  padding: 10px;
  font-family: Helvetica Neue;
    font-size: 12px;
    line-height: 14px;
  position: absolute;
 color: #aaa;
    -webkit-user-select: none;
  -moz-user-select: none;
}
div.label:hover{
    color: #333;
    cursor: pointer;
    cursor: hand;
}
.tree{
     pointer-events: none;
}
#content{
    position: relative;
 margin-top: 0;
  margin-left: auto;
  margin-right:auto;
  width: 750px;
}

Стили используются только для оформления и не влияют на работу скрипта, всё, что ему необходимо, он допишет сам. В частности, при помощи внутреннего CSS, текст развешивается как грозди на ветке.

JavaScript:

$(document).ready(function(){
    $("#container").click(function(evt){
      evt.stopPropagation();
      $(this).zoomTo({
            duration: 1000,
         targetsize: 1.0
     });
 });
 $(".label").click(function(evt){
      evt.stopPropagation();
      $(this).zoomTo({
            duration: 1000,
         targetsize: 0.6
     });
 });
});

Вот и сам код. Тут отслеживается событие клика по блоку-обёртке и по тексту, после чего идет вызов плагина.

Напоследок рассмотрим настройки нашего плагина зумирования. Отмечу, что использовать их просто и можно воспользоваться двумя вариантами: непосредственно передавать плагину параметры со значениями или дописывать атрибуты вида data-название_настройки в структуре HTML.

  • targetsize – указываем относительное увеличение размера (значения 0.0 - 1.0);
  • scalemode – указываем масштаб содержимого экрана в зависимости от размера (значения «width» | «height» | «both»);
  • duration – задаем продолжительность анимации в миллисекундах;
  • easing – задаем функцию смягчения анимации (значения «linear» | «ease» | «ease-in» | «ease-out» | «ease-in-out» | [p1, p2, p3, p4]);
  • nativeanimation – указываем браузеру использовать ли родную анимацию движка webkit (собственно актуально только для «гугл хром»);
  • root – указываем корневой элемент, по отношению к которому будет производится зумирование (Важно! Он должен быть отпозиционирован);
  • debug – включаем/отключаем отображение логов в консоли;
  • animationendcallback – указываем колбэк функцию;
  • preservescroll – запрещаем/разрешаем отмену зумирования при скроллинге.
Реклама
Karabas
10 декабря 2017
Здравствуйте спасибо за статью!
Подскажите пожалуйста как дописывать и куда именно атрибуты вида data-название_настройки в структуре HTML, чтобы добавить - preservescroll – запрещаем/разрешаем отмену зумирования при скроллинге.
У меня как-то не получилось.
Антон Кулешов
10 декабря 2017
Атрибуты вида data-название_настройки прописываются к элементу, к которому применяется плагин. В случае статьи к элементам с id=label1 и id=label2.
Karabas
10 декабря 2017
Спасибо, вот так правильно?
<div class="label" id="label1" data-preservescroll="true">
An apple does not fall far from the tree.
</div>
Антон Кулешов
10 декабря 2017
Да
Karabas
11 декабря 2017
Спасибо за ответ, но почему-то результата не было, при "зумировании скроллингом (колесом мышки я так понял)" - не увеличивалось изображение.
Karabas
11 декабря 2017
Мне нужна была функция зумирования (колесом мышки), может я не так понял.
Антон Кулешов
11 декабря 2017
Рад помочь. У меня на сайте есть ещё три статьи по лупам, если эта не подошла. Можете попробовать:

1. Плагин SergeLand Image Zoomer – увеличение картинок (http://falbar.ru/article/plagin-sergeland-image-zoomer-uvelichenie-kartinok);
2. Увеличение картинки с помощью эффекта лупы на jQuery (http://falbar.ru/article/uvelichenie-kartinki-s-pomoshhyu-effekta-lupy-na-jquery);
3. Эффект лупы при помощи jQuery плагина (http://falbar.ru/article/effekt-lupy-pri-pomoshhi-jquery-plagina).
Karabas
12 декабря 2017
Благодарю, я их уже посмотрел :)
Творческих успехов!
no_avatar