Advanced Search

Results 1 to 6 of 6

Thread: JQuery Image Magnify - image rendering problem

  1. #1
    Join Date
    Jan 2010
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default JQuery Image Magnify - image rendering problem

    1) Script Title: jQuery Image Magnify v1.1

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

    3) Describe problem:

    The script works great! However, I seem to have an issue with image rendering in Internet Explorer. The thumbnail and magnified image looks great in any other browser BUT IE. The picture seems distorted in Internet Explorer.
    I've followed the exact script layout as documented, so there are no modifications to the code. Any suggestions?

    caleb

  2. #2
    Join Date
    Jan 2008
    Posts
    4,158
    Thanks
    28
    Thanked 623 Times in 619 Posts
    Blog Entries
    1

    Default

    Please post a link to the page on your site that contains the problematic script so we can check it out.

    Please include your code so that we can take a look at it, we can't do much without it. When you do post your code remember to use [code] tags. That includes [ html ], [ code ], and [ php ].

    Please do the above before further assistance.
    Jeremy | jfein.net

  3. The Following User Says Thank You to Nile For This Useful Post:

    caleb22 (01-05-2010)

  4. #3
    Join Date
    Jan 2010
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Here is the link to the page:

    http://lesterpages.com/other.html

    html:
    HTML Code:
    <img src="images/iPhone_Smisco_main.jpg" class="magnify"  style="width:80px; height:120px" />
    <img src="images/iPhone_Smisco.jpg" class="magnify"  style="width:80px; height:120px" />
    <img src="images/iPhone_Smisco2.jpg" class="magnify"  style="width:80px; height:120px" />
    <img src="images/iPhone_Smisco_Map.jpg" class="magnify"  style="width:80px; height:120px" />
    <img src="images/iPhone_Smisco_contact.jpg" class="magnify"  style="width:80px; height:120px" />



    Code:
    /* jQuery Image Magnify script v1.1
    * This notice must stay intact for usage 
    * Author: Dynamic Drive at 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.
    */
    
    jQuery.noConflict()
    
    jQuery.imageMagnify={
    	dsettings: {
    		magnifyby: 3, //default increase factor of enlarged image
    		duration: 500, //default duration of animation, in millisec
    		imgopacity: 0.2 //opacify of original image when enlarged image overlays it
     	},
    	cursorcss: 'url(magnify.cur), -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image
    	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'})
    			.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 image
    
    jQuery(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()
    		})
    	})
    })

  5. #4
    Join Date
    Aug 2004
    Posts
    9,864
    Thanks
    3
    Thanked 960 Times in 949 Posts
    Blog Entries
    15

    Default

    In what version of IE are you seeing the distortion? Using IE8 the images at the bottom of your frontpage scale fine for me. The enlarged image is scaled based on the dimensions of the thumbnails, so you may want to give your thumbnails explicit width/height attributes.
    DD Admin

  6. The Following User Says Thank You to ddadmin For This Useful Post:

    caleb22 (01-05-2010)

  7. #5
    Join Date
    Jan 2010
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by ddadmin View Post
    In what version of IE are you seeing the distortion? Using IE8 the images at the bottom of your frontpage scale fine for me. The enlarged image is scaled based on the dimensions of the thumbnails, so you may want to give your thumbnails explicit width/height attributes.
    Thank you. I am viewing it in IE7, but I also noticed it does the same thing in FireFox (not the latest version), but only the thumbnails. The magnified pic looks fine.
    How do you suggest I add explicit width/height attributes? (Sorry for the silly question, rather new to this) I've checked the ratio's carefully and thought the dimensions were ok.

    thanks again for looking at this!

  8. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,702
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    Setting explicit width and height attributes means that instead of (and similar):

    Code:
    <img src="images/iPhone_Smisco_main.jpg" class="magnify"  style="width:80px; height:120px" />
    Do it like so:

    Code:
    <img src="images/iPhone_Smisco_main.jpg" class="magnify" width="80" height="120" />
    Last edited by jscheuer1; 01-06-2010 at 06:14 AM. Reason: clarity
    - John
    ________________________

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

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
  •