Note that there are some explanatory texts on larger screens.

plurals
  1. POhow to rewrite code for jquery 1.9
    primarykey
    data
    text
    <p>please help me to rewrite js code for jquery 1.9 library. before i was using 1.4. icture. tried to use 2 libraries in one page with no conflict. no result. </p> <pre><code>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&gt;=coords.left &amp;&amp; e.pageX&lt;=coords.right &amp;&amp; e.pageY&gt;=coords.top &amp;&amp; e.pageY&lt;=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('&lt;img src="'+options.largeimagesrc+'"/&gt;') //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=$('&lt;div style="position:absolute;width:100px;height:100px;display:none;overflow:hidden;border:1px solid black;" /&gt;') .append('&lt;div style="position:relative;left:0;top:0;" /&gt;') .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&lt;=-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 &amp;&amp; options.largeimage.length&gt;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 (parseInt(this.style.width)&gt;0 &amp;&amp; parseInt(this.style.height)&gt;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($) }) </code></pre> <p>tried to use 2 library in one page with noConflict but no result. all other scripts uses 1.9 library</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload