X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Как увеличить зум в jquery
contex1
contex1
Topic Starter сообщение 18.12.2013, 19:12; Ответить: contex1
Сообщение #1


Частый гость
**

Группа: User
Сообщений: 91
Регистрация: 17.11.2013
Поблагодарили: 34 раза
Репутация:   16  


Есть скрипт jquery
CODE
(function($) {
$.fn.jqueryzoom = function(options) {
var settings = {
xzoom: 200, //zoomed width default width
yzoom: 200, //zoomed div default width
offset: 10, //zoomed div default offset
position: "right" //zoomed div default position,offset position is to the right of the image
};

if(options)
$.extend(settings, options);

var noalt ='';

$(this).hover(function() {
var imageRelativeLeft = $(this).get(0).offsetLeft;
var imageLeft = $($(this).get(0)).offset().left;
var imageRelativeTop = $(this).get(0).offsetTop;
var imageTop = $($(this).get(0)).offset().top;
var imageWidth = $(this).get(0).offsetWidth;
var imageHeight = $(this).get(0).offsetHeight;

attr = (typeof($(this).attr("rel")) != 'undefined' && $(this).attr("rel") != '') ? "rel" : "alt";
noalt = $(this).attr(attr);
var bigimage = noalt;
$(this).attr(attr, '');

if($("div.zoomdiv").get().length == 0)
$(this).after("<div class='zoomdiv'><img class='bigimg' src='"+bigimage+"'/></div>");

if(settings.position == "right")
leftpos = imageRelativeLeft + imageWidth + settings.offset;
else
leftpos = imageRelativeLeft - settings.xzoom - settings.offset;

$("div.zoomdiv").css({top: imageRelativeTop,left: leftpos});
$("div.zoomdiv").width(settings.xzoom);
$("div.zoomdiv").height(settings.yzoom);
$("div.zoomdiv").show();

$(document.body).mousemove(function(e) {
var bigwidth = $(".bigimg").get(0).offsetWidth;
var bigheight = $(".bigimg").get(0).offsetHeight;
var scaley ='x';
var scalex= 'y';

if(isNaN(scalex)|isNaN(scaley)) {
var scalex = Math.round(bigwidth/imageWidth) ;
var scaley = Math.round(bigheight/imageHeight);
}

mouse = new MouseEvent(e);

scrolly = mouse.y - imageTop - ($("div.zoomdiv").height()*1/scaley)/2 ;
$("div.zoomdiv").get(0).scrollTop = scrolly * scaley ;
scrollx = mouse.x - imageLeft - ($("div.zoomdiv").width()*1/scalex)/2 ;
$("div.zoomdiv").get(0).scrollLeft = (scrollx) * scalex ;
});
}, function() {
$(this).attr(attr, noalt);
$("div.zoomdiv").hide();
$(document.body).unbind("mousemove");
$(".lenszoom").remove();
$("div.zoomdiv").remove();
});
}
})(jQuery);

function MouseEvent(e) {
this.x = e.pageX
this.y = e.pageY
}


И есть CSS к нему
CODE
div.zoomdiv {
z-index : 10;
position : absolute;
top:0px;
left:0px;
width : 200px;
height : 200px;
background: #ffffff;
border:1px solid #CCCCCC;
display:none;
text-align: center;
overflow: hidden;

}


img.jqzoom{
cursor:crosshair;
position:relative;

}




Как увеличить размер окна при наведении? А то когда навожу, зум вроде норм, только окошечко сооовсем маленькое. Всем спасибо заранее.


--------------------
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Маленький кейс как сделать много почтовых ящиков в Gmail
Один аккаунт = много ящиков
7 PostBrigada 629 Вчера, 23:53
автор: Стэнли
Открытая тема (нет новых ответов) Как мошенники зарабатывают на прямых трансляциях в Instagram
Не ждите порно в инстаграм, его нет
12 PostBrigada 1345 16.12.2017, 23:00
автор: PostBrigada
Открытая тема (нет новых ответов) Как сейчас зарегистрировать Яндекс кошелек за пределами России?
4 metvekot 386 16.12.2017, 19:04
автор: metvekot
Открытая тема (нет новых ответов) Как поднять доверие к сайту?
5 fair_exchange 400 16.12.2017, 18:33
автор: genjnat
Горячая тема (нет новых ответов) Черный список обменников и как безопасно обменять валюту
141 Kurses 29957 15.12.2017, 13:04
автор: BestExchangers


 



RSS Текстовая версия Сейчас: 18.12.2017, 0:09
Дизайн