Foros del Web » Programando para Internet » Jquery »

Conflicto entre pluguins jQuery

Estas en el tema de Conflicto entre pluguins jQuery en el foro de Jquery en Foros del Web. Hola, 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 ...
  #1 (permalink)  
Antiguo 28/09/2010, 06:10
 
Fecha de Ingreso: noviembre-2009
Mensajes: 9
Antigüedad: 9 años
Puntos: 0
Conflicto entre pluguins jQuery

Hola,

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:
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
El contenido del archivo (ddpowerzoomer.js) es este:

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($)
})
  #2 (permalink)  
Antiguo 28/09/2010, 06:16
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 8 años, 11 meses
Puntos: 65
Respuesta: Conflicto entre pluguins jQuery

seguro que incluiste jquery?
  #3 (permalink)  
Antiguo 28/09/2010, 06:29
 
Fecha de Ingreso: noviembre-2009
Mensajes: 9
Antigüedad: 9 años
Puntos: 0
Respuesta: Conflicto entre pluguins jQuery

Si jQuery biene incluido en drupal.

He visto esto buscando:

http://www.marc-torres.com/jquery-is-not-a-function-como-resolverlo/

Por eso he llegado a la conclusion que es un conflicto.

He intentado hacer lo que dice en esta pagina, pero continuan apareciendome errores, por lo que he pensado que quiza es mejor modificar la funcion del pluguin para llamarla de otra manera.
  #4 (permalink)  
Antiguo 28/09/2010, 06:33
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 8 años, 11 meses
Puntos: 65
Respuesta: Conflicto entre pluguins jQuery

incluiste el plugin después de jquery?

fijate si la versión del plugin es para la versión del jquery que tengas
  #5 (permalink)  
Antiguo 28/09/2010, 06:36
 
Fecha de Ingreso: noviembre-2009
Mensajes: 9
Antigüedad: 9 años
Puntos: 0
Respuesta: Conflicto entre pluguins jQuery

Si he colocado el pluguin despues de incluir jQuery, y la version he colocado la ultima de jQuery.
  #6 (permalink)  
Antiguo 28/09/2010, 06:57
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 8 años, 11 meses
Puntos: 65
Respuesta: Conflicto entre pluguins jQuery

quizás exista otro plugin que utiliza el alias $

proba con esto, ah ahora veo que ya leiste en el blog
http://api.jquery.com/jQuery.noConflict/
pero raro si drupal ya utiliza jquery

tenes tu proyecto online para ver?
  #7 (permalink)  
Antiguo 29/09/2010, 02:26
 
Fecha de Ingreso: noviembre-2009
Mensajes: 9
Antigüedad: 9 años
Puntos: 0
Respuesta: Conflicto entre pluguins jQuery

Si hay otro pluguin que utiliza $ el de ubercart, es el error que me sale.

He probado usando el noConflict, aunque no estoy seguro de haverlo usado bien.

No tengo el proyecto online, esta todo en local...

Etiquetas: conflicto
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:26.