Results 1 to 3 of 3

Thread: Image rollover with power zoom shows wrong image

  1. #1
    Join Date
    Mar 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Image rollover with power zoom shows wrong image

    1) Script Title: Image Power Zoom

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

    3) Describe problem:

    I'm using the image power zoomer script with Javascript mouseovers.
    The page has 5 thumbnails and a larger image. Clicking the small thumbnails
    just does a document.getelementbyid('bigimage').src='<path to thumbnail's big image'
    Big image shows the correct image but the magnifying region shows the old image. Is it possible to refresh the magnifier so it gets the correct graphic.
    Thanks
    Graham

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 421 Times in 415 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <script type="text/javascript" >
    
    /*Image Power Zoomer v1.1 (June 18th, 2010)
    * This notice must stay intact for usage
    * Author: Dynamic Drive at http://www.dynamicdrive.com/
    * Visit http://www.dynamicdrive.com/ for full source code
    */
    
    //June 18th, 10: Adds ability to specify a different, higher resolution version of the original image as the image shown inside the magnifying glass.
    
    jQuery.noConflict()
    
    var ddpowerzoomer={
    	dsetting: {defaultpower:2, powerrange:[2,7], magnifiersize:[75, 75]},
    	mousewheelevt: (/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel", //FF doesn't recognize mousewheel as of FF3.x
    	$magnifier: {outer:null, inner:null, image:null},
    	activeimage: null,
    
    	movemagnifier:function(e, moveBol, zoomdir){
    		var activeimage=ddpowerzoomer.activeimage //get image mouse is currently over
    		var activeimginfo=activeimage.info
    		var coords=activeimginfo.coords //get offset coordinates of image relative to upper left corner of page
    		var $magnifier=ddpowerzoomer.$magnifier
    		var magdimensions=activeimginfo.magdimensions //get dimensions of magnifier
    		var power=activeimginfo.power.current
    		var powerrange=activeimginfo.power.range
    		var x=e.pageX-coords.left //get x coords of mouse within image (where top corner of image is 0)
    		var y=e.pageY-coords.top
    		if (moveBol==true){
    			if (e.pageX>=coords.left && e.pageX<=coords.right && e.pageY>=coords.top && e.pageY<=coords.bottom)  //if mouse is within currently within boundaries of active base image
    				$magnifier.outer.css({left:e.pageX-magdimensions[0]/2, top:e.pageY-magdimensions[1]/2})	//move magnifier so it follows the cursor
    			else{ //if mouse is outside base image
    				ddpowerzoomer.activeimage=null
    				$magnifier.outer.hide() //hide magnifier
    			}
    		}
    		else if (zoomdir){ //if zoom in
    			var od=activeimginfo.dimensions //get dimensions of image
    			var newpower=(zoomdir=="in")? Math.min(power+1, powerrange[1]) : Math.max(power-1, powerrange[0]) //get new power from zooming in or out
    			var nd=[od[0]*newpower, od[1]*newpower] //calculate dimensions of new enlarged image within magnifier
    			$magnifier.image.css({width:nd[0], height:nd[1]})
    			activeimginfo.power.current=newpower //set current power to new power after magnification
    		}
    		power=activeimginfo.power.current //get current power
    		var newx=-x*power+magdimensions[0]/2 //calculate x coord to move enlarged image
    		var newy=-y*power+magdimensions[1]/2
    		$magnifier.inner.css({left:newx, top:newy}) //move image wrapper within magnifier so the correct image area is shown
    	},
    
    	setupimage:function($, imgref, options){
    		var s=jQuery.extend({}, ddpowerzoomer.dsetting, options)
    		var $imgref=$(imgref),id=options.id;
    		imgref.info={ //create object to remember various info regarding image
    			power: {current:s.defaultpower, range:s.powerrange},
    			magdimensions: s.magnifiersize,
    			dimensions: [$imgref.width(), $imgref.height()],
    			coords: null
    		}
    		$imgref.unbind('mouseenter').mouseenter(function(e){ //mouseenter event over base image
    			var $magnifier=ddpowerzoomer.$magnifier
    			$magnifier.outer.css({width:s.magnifiersize[0], height:s.magnifiersize[1]}) //set magnifier's size
    			var offset=$imgref.offset() //get image offset from document
    			var power=imgref.info.power.current
    			$magnifier.inner.html('<img src="'+options.largeimagesrc+'"'+(id?'id='+id+'MAG ':'')+'   />') //get base image's src and create new image inside magnifier based on it
    			$magnifier.image=$magnifier.outer.find('img:first')
    				.css({width:imgref.info.dimensions[0]*power, height:imgref.info.dimensions[1]*power}) //set size of enlarged image
    			var coords={left:offset.left, top:offset.top, right:offset.left+imgref.info.dimensions[0], bottom:offset.top+imgref.info.dimensions[1]}
    			imgref.info.coords=coords //remember left, right, and bottom right coordinates of image relative to doc
    			$magnifier.outer.show()
    			ddpowerzoomer.activeimage=imgref
      	})
      },
    
       Swap:function(imgid,imgsrc,magsrc){
        if (ddpowerzoomer[imgid]){
         var img=document.getElementById(imgid),mag=document.getElementById(imgid+'MAG');
         img.src=imgsrc||magsrc;
         ddpowerzoomer[imgid].largeimagesrc=magsrc;
         if (mag){
          mag.src=magsrc||imgsrc;
         }
        }
       },
    
    	init:function($){
    		var $magnifier=$('<div style="position:absolute;width:100px;height:100px;display:none;overflow:hidden;border:1px solid black;" />')
    			.append('<div style="position:relative;left:0;top:0;" />')
    			.appendTo(document.body) //create magnifier container and add to doc
    		ddpowerzoomer.$magnifier={outer:$magnifier, inner:$magnifier.find('div:eq(0)'), image:null} //reference and remember various parts of magnifier
    		$magnifier=ddpowerzoomer.$magnifier
    		$(document).unbind('mousemove.trackmagnifier').bind('mousemove.trackmagnifier', function(e){ //bind mousemove event to doc
    			if (ddpowerzoomer.activeimage){ //if mouse is currently over a magnifying image
    				ddpowerzoomer.movemagnifier(e, true) //move magnifier
    			}
    		}) //end document.mousemove
    
    		$magnifier.outer.bind(ddpowerzoomer.mousewheelevt, function(e){ //bind mousewheel event to magnifier
    			if (ddpowerzoomer.activeimage){
    				var delta=e.detail? e.detail*(-120) : e.wheelDelta //delta returns +120 when wheel is scrolled up, -120 when scrolled down
    				if (delta<=-120){ //zoom out
    					ddpowerzoomer.movemagnifier(e, false, "out")
    				}
    				else{ //zoom in
    					ddpowerzoomer.movemagnifier(e, false, "in")
    				}
    				e.preventDefault()
    			}
    		})
    	}
    } //ddpowerzoomer
    
    jQuery.fn.addpowerzoom=function(options){
    	var $=jQuery
    	return this.each(function(){ //return jQuery obj
    		if (this.tagName!="IMG")
    			return true //skip to next matched element
    		if (typeof options=="undefined")
    			options={}
    		if (options.largeimage && options.largeimage.length>0){ //preload large image?
    			options.preloadimg=new Image()
    			options.preloadimg.src=options.largeimage
    		}
    		var $imgref=$(this)
    		options.largeimagesrc=(options.preloadimg)? options.preloadimg.src : $imgref.attr('src')
        if (this.id){
           options.id=this.id;
            ddpowerzoomer[this.id]=options;
        }
    	if (parseInt(this.style.width)>0 && parseInt(this.style.height)>0) //if image has explicit CSS width/height defined
    			ddpowerzoomer.setupimage($, this, options)
    		else if (this.complete){ //account for IE not firing image.onload
    			ddpowerzoomer.setupimage($, this, options)
    		}
    		else{
    			$imgref.bind('load', function(){
    				ddpowerzoomer.setupimage($, this, options)
    			})
    		}
    	})
    }
    
    jQuery(document).ready(function($){ //initialize power zoomer on DOM load
    	ddpowerzoomer.init($)
    })
    </script>
    
    <script type="text/javascript">
    
    jQuery(document).ready(function($){ //fire on DOM ready
    
    	$('#myimage').addpowerzoom()
    
    
    })
    
    </script>
    
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    
    /*]]>*/
    </script>
    </head>
    
    <body>
    <img id="myimage" src="http://www.dynamicdrive.com/dynamicindex4/listenmusic.jpg" style="width:400px; height:300px" />
    
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg" width="100" onmouseup="ddpowerzoomer.Swap('myimage',this.src,'http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg');"/>
    </form>
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Mar 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for your help. Absolutely perfect.
    Regards
    Graham

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
  •