Главная » 2010 » Октябрь » 9 » zoom картинки (Скрипты для ucoz)
09.10.2010, 15:10

zoom картинки



Данный плагин реализует зум изображения — при наведении мышкой на картинку всплывает небольшое окошко 50х50, в котором находится увеличенная копия изображения, причём если водить мышкой по изображению, то изображение в окошке тоже будет прокручиваться.

Скрипт проверен в браузерах Opera, Firefox и IE.

Установка:

1. Задайте картинкам, к которым нужно применить зум, класс zoomimage. Пример:

Code
<img class="zoomimage" src="$OTHER_1$" />

2. В конец BODY установите сам плагин:

Code
<script type="text/javascript">
function Zoom(imgclass) {
  function addEvent(object, type, handler) {
  function handle(e) {
  e = e || window.event;
  if (!e.pageX || !e.pageY) {
  var html = document.documentElement,
  body = document.body;
  e.pageX = event.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0);
  e.pageY = event.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0);
  }
  handler.call(object, e);
  }
  if (object.addEventListener) {
  object.addEventListener(type, handle, false);
  } else {
  object.attachEvent('on' + type, handle);
  }
  }
  function getOffset(element) {
  var offsetLeft = 0,
  offsetTop = 0;
  do {
  offsetLeft += element.offsetLeft;
  offsetTop += element.offsetTop;
  } while (element = element.offsetParent)
  return {
  top: offsetTop,
  left: offsetLeft
  }
  }
  function getElementsByClassName(imgclass) {
  if (document.getElementsByClassName) {
  return document.getElementsByClassName(imgclass);
  } else {
  var nodes = document.getElementsByTagName('*'),
  tmp = [];
  for (var i = 0; i < nodes.length; i++) {
  if (new RegExp('\\b' + imgclass + '\\b').test(nodes[i].className)) {
  tmp.push(nodes[i]);
  }
  }
  return tmp;
  }
  }
  var images = getElementsByClassName(imgclass);
  for (var i = 0; i < images.length; i++) {
  var tip = document.createElement('DIV');
  tip.style.cssText = 'overflow: hidden; display: none; width: 50px; height: 50px; border: 1px solid #EEEEEE; position: absolute; background: #FFFFFF;';
  images[i].offset = getOffset(images[i]);
  images[i].parentNode.insertBefore(tip, images[i].nextSibling);
  addEvent(images[i], 'mouseover', function () {
  this.nextSibling.innerHTML = '<img src="' + this.src + '" width="' + (this.offsetWidth * 2) + '" height="' + (this.offsetHeight * 2) + '" />';
  this.nextSibling.style.display = 'block';
  });
  addEvent(images[i], 'mouseout', function () {
  this.nextSibling.style.display = 'none';
  });
  addEvent(images[i], 'mousemove', function (event) {
  var tip = this.nextSibling,
  img = tip.firstChild;
  tip.style.top = event.pageY + 10;
  tip.style.left = event.pageX + 10;
  img.style.marginTop = -event.pageY * 2 + this.offset.top * 2 + 25;
  img.style.marginLeft = -event.pageX * 2 + this.offset.left * 2 + 25;
  });
  }
}
Zoom('zoomimage');
</script>

В конце кода мы видим вызов Zoom('zoomimage'); — так вот, zoomimage — это и есть класс изображений, можно менять на свой при необходимости.

Материал взят с сайта infoscript.ru
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: $USERNAME$
Категория: Скрипты uCoz | Просмотров: 4105 | Добавил: antisept | Рейтинг: 4.0/1 |
Теги: картинки, zoom
Всего комментариев: 3
0  
1 viv777   (10.10.2010 20:02) [Материал]
Аватар пользователя
Думаю хороший скрипт для сайтов Укоз.

0  
2 slavusik916   (10.07.2011 01:48) [Материал]
Аватар пользователя
Зря думаешь!!! Скрипт работает наоборот, при наведении картинка уменьшается. когда в то время оригинал в полный размер становится после грёбаного скрипта.... напиши мне, я подскажу как на юкозе не применять никакого скрипта, просто при добавлении материала как обычно добавляю фото и работает на ура!!! А этот херь какая то

0  
3 IgorSt   (10.07.2011 01:52) [Материал]
Аватар пользователя
slavusik916, чтоо? Как ты такое собрался реализовать без скрипта?

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]