v ZoomImage plugin by $USERNAME$
Главная » Файлы » Все для uCoz » Cкрипты для ucoz

ZoomImage plugin by $USERNAME$
09.10.2010, 22:38

Скачать
Загрузок: 0

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

Установка:

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

Код: Выделить всё
<img class="zoomimage" src="$OTHER_1$" />

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

Код: Выделить всё
Code
<br><script type="text/javascript"> <br>function Zoom(imgclass) { <br>function addEvent(object, type, handler) { <br>function handle(e) { <br>e = e || window.event; <br>if (!e.pageX || !e.pageY) { <br>var html = document.documentElement, <br>body = document.body; <br>e.pageX = event.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0); <br>e.pageY = event.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0); <br>} <br>handler.call(object, e); <br>} <br>if (object.addEventListener) { <br>object.addEventListener(type, handle, false); <br>} else { <br>object.attachEvent('on' + type, handle); <br>} <br>} <br>function getOffset(element) { <br>var offsetLeft = 0, <br>offsetTop = 0; <br>do { <br>offsetLeft += element.offsetLeft; <br>offsetTop += element.offsetTop; <br>} while (element = element.offsetParent) <br>return { <br>top: offsetTop, <br>left: offsetLeft <br>} <br>} <br>function getElementsByClassName(imgclass) { <br>if (document.getElementsByClassName) { <br>return document.getElementsByClassName(imgclass); <br>} else { <br>var nodes = document.getElementsByTagName('*'), <br>tmp = []; <br>for (var i = 0; i < nodes.length; i++) { <br>if (new RegExp('\\b' + imgclass + '\\b').test(nodes[i].className)) { <br>tmp.push(nodes[i]); <br>} <br>} <br>return tmp; <br>} <br>} <br>var images = getElementsByClassName(imgclass); <br>for (var i = 0; i < images.length; i++) { <br>var tip = document.createElement('DIV'); <br>tip.style.cssText = 'overflow: hidden; display: none; width: 50px; height: 50px; border: 1px solid #EEEEEE; position: absolute; background: #FFFFFF;'; <br>images[i].offset = getOffset(images[i]); <br>images[i].parentNode.insertBefore(tip, images[i].nextSibling); <br>addEvent(images[i], 'mouseover', function () { <br>this.nextSibling.innerHTML = '<img src="' + this.src + '" width="' + (this.offsetWidth * 2) + '" height="' + (this.offsetHeight * 2) + '" />'; <br>this.nextSibling.style.display = 'block'; <br>}); <br>addEvent(images[i], 'mouseout', function () { <br>this.nextSibling.style.display = 'none'; <br>}); <br>addEvent(images[i], 'mousemove', function (event) { <br>var tip = this.nextSibling, <br>img = tip.firstChild; <br>tip.style.top = event.pageY + 10; <br>tip.style.left = event.pageX + 10; <br>img.style.marginTop = -event.pageY * 2 + this.offset.top * 2 + 25; <br>img.style.marginLeft = -event.pageX * 2 + this.offset.left * 2 + 25; <br>}); <br>} <br>} <br>Zoom('zoomimage'); <br></script><br>
Категория: Cкрипты для ucoz | Добавил: Rashid30RUS
Просмотров: 484 | Загрузок: 0 | Рейтинг: 0.0/0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Наша кнопка



Наш опрос
Нужно ли добавлять файлы для других CMS таких как DLE| WP|JM?
Всего ответов: 392
Категории раздела
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

---------------------------------------
[ Кто нас сегодня посетил ]