• Страница 1 из 1
  • 1
Форум CREWEBIK.ru » design studio for uCoz » ФОРУМ ВЕБ МАСТЕРОВ » Скрипты и коды » ZoomImage plugin by $USERNAME$
ZoomImage plugin by $USERNAME$
exclusiv...
/avatar/01/4333-414916.png
1');return false;" rel="nofollow" href="javascript://" name="382">
14.09.2011 в 21:27 Данный плагин реализует зум изображения — при наведении мышкой на картинку всплывает небольшое окошко 50х50, в котором находится увеличенная копия изображения, причём если водить мышкой по изображению, то изображение в окошке тоже будет прокручиваться.
DEMO
Установка:

1. Задайте картинкам, к которым нужно применить зум, класс zoomimage. Пример:
Code
<img class="zoomimage" src="$OTHER_1$" />

В конец 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>
Форум CREWEBIK.ru » design studio for uCoz » ФОРУМ ВЕБ МАСТЕРОВ » Скрипты и коды » ZoomImage plugin by $USERNAME$
  • Страница 1 из 1
  • 1
Поиск: