Assistane with Power Zoomer

**jofan** · 06-25-2010, 09:55 PM

Hi,

I am currently using the Dynamic Drive Power Zoomer script to magnify a series of images when moused over - this is working fine, thanks dynamic drive for this.

However I have 2 changes i would like to implement:

1.
I would like to be able to click on the magnified image and then have a new page / tab open up.

2.
I need to pass some kind of variable into the new page / tab to let me know what image was actually clicked on (the call to the script takes an image ID initially and hopefully this same ID could be passed into the new page, ideally as a PHP variable as the new page is dealing with database access)

As a newbie to these scripts im not sure how to deal with this?

The code is as follows, thanks in advance...

Code:

/*Image Power Zoomer v1.0 (March 1st, 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
*/

//Updated March 13th, 10'

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)
    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="'+$imgref.attr('src')+'"/>') //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
    })
  },


  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
    var $imgref=$(this)
    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($)
})

**jofan** · 06-27-2010, 05:41 AM

Hi,
To anyone who can help with this, ive tried to sort this myself but totally stuck im afraid

Hope someone can help

Regards, J

**paul_love** · 07-21-2010, 06:19 AM

hi i came up against the same thing
i may have even pieced together the soluton from reading your post

but anyway

just put it in a php page and pass through the variables that way

so you want

Code:

 <a onclick="display(<?php echo  $i;  ?>)"> 
	  <img ..../>
  </a>

to load call javascript

Code:

function display(b)
{
	document.getElementById("i"+a).style.border = "";
	document.getElementById("i"+b).style.border = "2px solid blue";
	update(b) 
}
function update(b) 
{
	frames['main_photo'].location.href='main_photo.php?img='+results[b];
	a=b;
}

where results[b] is the javascript array of your image names/ids
'a' is my variable so i know which #picture in the array was called last time

then you need your iframe to display the page

Code:

<td valign="top" align="center" width="550px" height="550px"> 
 <IFRAME name="main_photo" frameborder="no" width="560" height="550" scrolling="no">Browser does not support inline frames.</IFRAME>
</td>

then on a separate page i have called main_photo.php

do this...

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">
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="ddpowerzoomer.js">

/***********************************************
* Image Power Zoomer- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">jQuery(document).ready(function($){$('#myimage').addpowerzoom({defaultpower:1.37, powerrange:[1.37,1.37], magnifiersize:[125,125]})});</script>

</head>

<body>

<CENTER>
<a  onclick="parent.next()">
<img id="myimage" alt=<?php echo "images/mc_".$_GET["img"].".jpg" ?> src=<?php echo "images/mc_".$_GET["img"].".jpg" ?> />
</a>
</CENTER>
	  
</body>
</html>

where parent.next() is the code to display next photo

(in original php not the main_photo one)

Code:

function next()
{
     if (a<results.length-1) 
	 {
	 document.getElementById("i"+a).style.border = "";
	 a=a+1;
	 document.getElementById("i"+a).style.border = "2px solid blue";
	 update(a) ;
	 }
}

**paul_love** · 07-21-2010, 06:51 AM

also
there is this bit
that is probably more useful to you

i forgot that i had updated the script a little bit no expert in js but this did the trick

Code:

		$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('<a onclick="ddpowerzoomer.magclick()" style="cursor:crosshair"><img src="'+$imgref.attr('src')+'"/></a>') //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
			
		})
	},
	
	magclick:function(){
	parent.next()
	},

i copied everything from the $imgref.unbind('mouseenter').mouseenter(function(e) line so that it is easier for you to find which lines of code to replace really i just updated the inner.html line and added the magclick:function()
the code above also gves you a crosshair style cursor over the image

a bit late i know but hopefully someone else can benefit even if you have moved on

**paul_love** · 07-21-2010, 07:24 AM

actually i think there is probably a better way with this type of syntax

Code:

$('#foo').bind('click', function() {
  alert($(this).text());
});

http://api.jquery.com/bind/

but i don't know how right now

plus if anyone is listening the magnifier box doesn't disappear all the time when mouse moves outside the iframe and when the picture changes when clicking on the picture (shows next one) the magnifer appears at below the picture until the mouse moves and then it works out where it should be

Thread: Assistane with Power Zoomer

Thread Tools

Search Thread

Assistane with Power Zoomer

Bookmarks

Bookmarks

Posting Permissions