Results 1 to 1 of 1

Thread: Assistance with Dynamic Drive Power Zoomer?

  1. #1
    Senior Member
    Join Date
    May 2010

    Default Assistance with Dynamic Drive Power Zoomer?


    I appreciate this is not the correct forum for this request but i have tried other forums without reply yet so hoping someone may be able to help here.

    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:

    I would like to be able to click on the magnified image and then have a new page / tab open up (at present clicking does nothing)

    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 initially takes an image ID iand 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 although i have tried without success so far

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

    /*Image Power Zoomer v1.0 (March 1st, 2010)
    * This notice must stay intact for usage
    * Author: Dynamic Drive at
    * Visit for full source code

    //Updated March 13th, 10'


    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 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)
    if (moveBol==true){
    if (e.pageX>=coords.left && e.pageX<=coords.right && e.pageY> && 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
    $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){ //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
    $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({[0]*power,[1]*power}) //set size of enlarged image
    var coords={leftffset.left,,[0],[1]} //remember left, right, and bottom right coordinates of image relative to doc

    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
    $(document).unbind('mousemove.trackmagnifier').bin d('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")
    } //ddpowerzoomer

    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(>0 && parseInt(>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)
    $imgref.bind('load', function(){
    ddpowerzoomer.setupimage($, this, options)

    jQuery(document).ready(function($){ //initialize power zoomer on DOM load


    Last edited by jofan; 06-26-2010 at 06:33 AM. Reason: updated

Posting Permissions

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