Нужны комментарии по готовому скрипту (magnifier)

[MrMoska]

Воспользовался готовым скриптом по увеличению картинки при нажатии. И столкнулся с ситуацией, что при ручном выставлении размеров картинки (в dreamweaver), ее увеличение происходит пропорционально.

Т.е. чем меньше я делаю картинку в миниатюре, тем меньше она становится в увеличенном состоянии (итог - плохая читаемость). 

Мне надо увеличить картинку до конкретного размера, не зависимо какой величины я сделаю миниатюру. 

 

Как я понимаю увеличение происходит в процентом соотношении или по коэффициентам, но я не могу найти команду в коде которая отвечает за "размер зума"

 

Помогите разобраться. 

 

Кстати курсор почему-то при наведении на картинку не меняется на лупу, так же пока не разобрался почему

/* jQuery Image Magnify script v1.1* This notice must stay intact for usage * Author: Dynamic Drive at http://www.dynamicdrive.com/*'>http://www.dynamicdrive.com/* Visit http://www.dynamicdrive.com/ for full source code* Nov 16th, 09 (v1.1): Adds ability to dynamically apply/reapply magnify effect to an image, plus magnify to a specific width in pixels.* Feb 8th, 11 (v1.11): Fixed bug that caused script to not work in newever versions of jQuery (ie: v1.4.4)*/jQuery.noConflict()jQuery.imageMagnify={	dsettings: {		magnifyby: 3, //óìîë÷àíèþ óâåëè÷åíèå ôàêòîðà óâåëè÷åííîå èçîáðàæåíèå		duration: 500, //ïî óìîë÷àíèþ ïðîäîëæèòåëüíîñòü àíèìàöèè, â ìñåê		imgopacity: 0.2 //opacify îðèãèíàëüíîãî èçîáðàæåíèÿ, êîãäà óâåëè÷åííîå èçîáðàæåíèå íàêëàäûâàåòñÿ îí 	},	cursorcss: 'url(magnify.cur), -moz-zoom-in, -webkit-zoom-in', //Çíà÷åíèå àòðèáóòà CSS â "Êóðñîð", â äîïîëíåíèå ê èñõîäíîìó èçîáðàæåíèþ	zIndexcounter: 100,	refreshoffsets:function($window, $target, warpshell){		var $offsets=$target.offset()		var winattrs={x:$window.scrollLeft(), y:$window.scrollTop(), w:$window.width(), h:$window.height()}		warpshell.attrs.x=$offsets.left //update x position of original image relative to page		warpshell.attrs.y=$offsets.top		warpshell.newattrs.x=winattrs.x+winattrs.w/2-warpshell.newattrs.w/2		warpshell.newattrs.y=winattrs.y+winattrs.h/2-warpshell.newattrs.h/2		if (warpshell.newattrs.x<winattrs.x+5){ //no space to the left?			warpshell.newattrs.x=winattrs.x+5			}		else if (warpshell.newattrs.x+warpshell.newattrs.w > winattrs.x+winattrs.w){//no space to the right?			warpshell.newattrs.x=winattrs.x+5		}		if (warpshell.newattrs.y<winattrs.y+5){ //no space at the top?			warpshell.newattrs.y=winattrs.y+5		}	},	magnify:function($, $target, options){		var setting={} //create blank object to store combined settings		var setting=jQuery.extend(setting, this.dsettings, options)		var attrs=(options.thumbdimensions)? {w:options.thumbdimensions[0], h:options.thumbdimensions[1]} : {w:$target.outerWidth(), h:$target.outerHeight()}		var newattrs={}		newattrs.w=(setting.magnifyto)? setting.magnifyto : Math.round(attrs.w*setting.magnifyby)		newattrs.h=(setting.magnifyto)? Math.round(attrs.h*newattrs.w/attrs.w) : Math.round(attrs.h*setting.magnifyby)		$target.css('cursor', jQuery.imageMagnify.cursorcss)		if ($target.data('imgshell')){			$target.data('imgshell').$clone.remove()			$target.css({opacity:1}).unbind('click.magnify')		}			var $clone=$target.clone().css({position:'absolute', left:0, top:0, visibility:'hidden', border:'1px solid gray', cursor:'pointer'}).appendTo(document.body)		$clone.data('$relatedtarget', $target) //save $target image this enlarged image is associated with		$target.data('imgshell', {$clone:$clone, attrs:attrs, newattrs:newattrs})		$target.bind('click.magnify', function(e){ //action when original image is clicked on			var $this=$(this).css({opacity:setting.imgopacity})			var imageinfo=$this.data('imgshell')			jQuery.imageMagnify.refreshoffsets($(window), $this, imageinfo) //refresh offset positions of original and warped images			var $clone=imageinfo.$clone			$clone.stop().css({zIndex:++jQuery.imageMagnify.zIndexcounter, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h, opacity:0, visibility:'visible', display:'block'})			.animate({opacity:1, left:imageinfo.newattrs.x, top:imageinfo.newattrs.y, width:imageinfo.newattrs.w, height:imageinfo.newattrs.h}, setting.duration,			function(){ //callback function after warping is complete				//none added					}) //end animate		}) //end click		$clone.click(function(e){ //action when magnified image is clicked on			var $this=$(this)			var imageinfo=$this.data('$relatedtarget').data('imgshell')			jQuery.imageMagnify.refreshoffsets($(window), $this.data('$relatedtarget'), imageinfo) //refresh offset positions of original and warped images			$this.stop().animate({opacity:0, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h},  setting.duration,			function(){				$this.hide()				$this.data('$relatedtarget').css({opacity:1}) //reveal original image			}) //end animate		}) //end click	}};jQuery.fn.imageMagnify=function(options){	var $=jQuery	return this.each(function(){ //return jQuery obj		var $imgref=$(this)		if (this.tagName!="IMG")			return true //skip to next matched element		if (parseInt($imgref.css('width'))>0 && parseInt($imgref.css('height'))>0 || options.thumbdimensions){ //if image has explicit width/height attrs defined			jQuery.imageMagnify.magnify($, $imgref, options)		}		else if (this.complete){ //account for IE not firing image.onload			jQuery.imageMagnify.magnify($, $imgref, options)		}		else{			$(this).bind('load', function(){				jQuery.imageMagnify.magnify($, $imgref, options)			})		}	})};jQuery.fn.applyMagnifier=function(options){ //dynamic version of imageMagnify() to apply magnify effect to an image dynamically	var $=jQuery	return this.each(function(){ //return jQuery obj		var $imgref=$(this)		if (this.tagName!="IMG")			return true //skip to next matched element			})	};//** The following applies the magnify effect to images with class="magnify" and optional "data-magnifyby" and "data-magnifyduration" attrs//** It also looks for links with attr rel="magnify[targetimageid]" and makes them togglers for that imagejQuery(document).ready(function($){	var $targets=$('.magnify')	$targets.each(function(i){		var $target=$(this)		var options={}		if ($target.attr('data-magnifyto'))			options.magnifyto=parseFloat($target.attr('data-magnifyto'))		if ($target.attr('data-magnifyby'))			options.magnifyby=parseFloat($target.attr('data-magnifyby'))		if ($target.attr('data-magnifyduration'))			options.duration=parseInt($target.attr('data-magnifyduration'))		$target.imageMagnify(options)	})	var $triggers=$('a[rel^="magnify["]')	$triggers.each(function(i){		var $trigger=$(this)		var targetid=$trigger.attr('rel').match(/\[.+\]/)[0].replace(/[\[\]']/g, '') //parse 'id' from rel='magnify[id]'		$trigger.data('magnifyimageid', targetid)		$trigger.click(function(e){			$('#'+$(this).data('magnifyimageid')).trigger('click.magnify')			e.preventDefault()		})	})})

Edited May 14, 2014 by MrMoska

[npofopr]

там же есть комментарии

а лупы нет, потому что видимо картинку лупы не может найти. в консоли это должно сообщаться.

[Great Rash]

Какой ужасный код...

[MrMoska]

Какая строка отвечает за размер увеличения картинки? 

[Great Rash]

Какая строка отвечает за размер увеличения картинки?

За это отвечает вот этот кусок кода:

$target.bind('click.magnify', function(e){ //action when original image is clicked on			var $this=$(this).css({opacity:setting.imgopacity})			var imageinfo=$this.data('imgshell')			jQuery.imageMagnify.refreshoffsets($(window), $this, imageinfo) //refresh offset positions of original and warped images			var $clone=imageinfo.$clone			$clone.stop().css({zIndex:++jQuery.imageMagnify.zIndexcounter, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h, opacity:0, visibility:'visible', display:'block'})			.animate({opacity:1, left:imageinfo.newattrs.x, top:imageinfo.newattrs.y, width:imageinfo.newattrs.w, height:imageinfo.newattrs.h}, setting.duration,			function(){ //callback function after warping is complete				//none added					}) //end animate		}) //end click

[MrMoska]

 

Какая строка отвечает за размер увеличения картинки?

За это отвечает вот этот кусок кода:

$target.bind('click.magnify', function(e){ //action when original image is clicked on			var $this=$(this).css({opacity:setting.imgopacity})			var imageinfo=$this.data('imgshell')			jQuery.imageMagnify.refreshoffsets($(window), $this, imageinfo) //refresh offset positions of original and warped images			var $clone=imageinfo.$clone			$clone.stop().css({zIndex:++jQuery.imageMagnify.zIndexcounter, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h, opacity:0, visibility:'visible', display:'block'})			.animate({opacity:1, left:imageinfo.newattrs.x, top:imageinfo.newattrs.y, width:imageinfo.newattrs.w, height:imageinfo.newattrs.h}, setting.duration,			function(){ //callback function after warping is complete				//none added					}) //end animate		}) //end click

Спасибо.

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

[SelenIT]

Самые важные комментарии в коде были "заобфусцированы", но от этого есть противоядие:

       dsettings: {		magnifyby: 3, //умолчанию увеличение фактора увеличенное изображение		duration: 500, //по умолчанию продолжительность анимации, в мсек		imgopacity: 0.2 //opacify оригинального изображения, когда увеличенное изображение накладывается он 	},	cursorcss: 'url(magnify.cur), -moz-zoom-in, -webkit-zoom-in', //Значение атрибута CSS в "Курсор", в дополнение к исходному изображению	zIndexcounter: 100,

[MrMoska]

 

Самые важные комментарии в коде были "заобфусцированы", но от этого есть противоядие:

       dsettings: {		magnifyby: 3, //умолчанию увеличение фактора увеличенное изображение		duration: 500, //по умолчанию продолжительность анимации, в мсек		imgopacity: 0.2 //opacify оригинального изображения, когда увеличенное изображение накладывается он 	},	cursorcss: 'url(magnify.cur), -moz-zoom-in, -webkit-zoom-in', //Значение атрибута CSS в "Курсор", в дополнение к исходному изображению	zIndexcounter: 100

Отличный сервис! И благодарю за ответ!

Все получилось, прям как доктор прописал.