Estoy haciendo un sitio en drupal. Y ahora estoy intentando poner este pluguin de jQuery: (http://www.dynamicdrive.com/dynamicindex4/powerzoomer.htm)
Pero al incluir el archivo (ddpowerzoomer.js) que mencionan en la pagina, que contiene el pluguin me entra en conflicto con otro existente de ubercart.
Me pregunto si podria modificar el codigo de (ddpowerzoomer.js) para que no entrara en conflicto, alguien podria hecharme una mano para modificarlo y poder llamar al pluguin de otra manera?
El error que me da de js es este:
Código:
El contenido del archivo (ddpowerzoomer.js) es este:Error: $ is not a function Archivo de origen: http://192.168.1.10:81/DEV/4pek/sites/all/modules/ubercart/uc_file/uc_file.js?e Línea: 47
Código:
/*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)
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+'"/>') //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
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 (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($)
})
