Advanced Search

Results 1 to 5 of 5

Thread: jQuery Image Magnify v1.11

  1. #1
    Join Date
    Apr 2011
    Posts
    75
    Thanks
    43
    Thanked 0 Times in 0 Posts

    Default jQuery Image Magnify v1.11

    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.
    Last edited by rexi; 05-13-2012 at 07:09 PM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,690
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

    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:

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Apr 2011
    Posts
    75
    Thanks
    43
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,690
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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):

    Code:
    	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:

    Code:
    	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):

    Code:
    <img src="my.jpg" class="magnify" style="width:110px;height:55px;" />
    But the magnifyto spec will be calculated and used automatically.
    Last edited by jscheuer1; 05-12-2012 at 10:30 PM. Reason: add as script change, later - format
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    rexi (05-12-2012)

  6. #5
    Join Date
    Apr 2011
    Posts
    75
    Thanks
    43
    Thanked 0 Times in 0 Posts

    Default

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •