jQuery Image Magnify v1.11

[rexi]

1) Script Title: jQuery Image Magnify v1.11

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...agemagnify.htm

3) Describe problem:

Hello,..I want make image when zoom that is all natural in dimension with "width",.."height".
Can someone show me all "js" file and script for image.Please show me HTML example.

Sorry,..I have no link site.

Thanks.

[jscheuer1]

The simplest way is, since the default magnification is 3x, Set the image's dimensions on the page to one third of its natural dimensions.

For example, if your image's natural dimensions are 300 x 150, and it's called my.jpg:

<img src="my.jpg"  class="magnify" style="width:100px; height:50px" />

[rexi]

Thanks Mr.John.
But,..can you show me what need be change on "js" file?
Give me example and like that.
I am not looking for few picture dimension,..I am looking use this script for future for all picture in natural dimension.

Thanks.

[jscheuer1]

Oh, I was wrong, the simplest way is to use the data-magnifyto attribute set to the image's native width.

For example, if your image's natural dimensions are 300 x 150, and it's called my.jpg:

<img src="my.jpg" data-magnifyto="300" class="magnify" style="width:110px;width:55px;" />

In this manner, any image may be styled to appear on the page as any size, and will always magnify to its native dimensions.

But, if even that much is too much per image for you, in the jquery.magnifier.js file, using a text only editor like NotePad, replace (near the end):

	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)
	})

With:

	var mags = $('.magnify');
	mags.each(function(){
		var im = this;
		$(new Image()).load(function(){
			$(im).imageMagnify({magnifyto: this.width});
		}).attr('src', im.src);
	});

You still have to specify the on page width or height for the image (both is preferable I believe for some browsers):

<img src="my.jpg" class="magnify" style="width:110px;height:55px;" />

But the magnifyto spec will be calculated and used automatically.

[rexi]

Wow,..that is working perfect.
Mr. John,..thank you very much.