Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Porque este plugin reconoce el class y no el id

Estas en el tema de Porque este plugin reconoce el class y no el id en el foro de Frameworks JS en Foros del Web. Tengo un problema con el plugin Pretty Photo. Sucede que si a un div le pongo un class y le especifico el .class en el ...
  #1 (permalink)  
Antiguo 18/08/2010, 12:45
 
Fecha de Ingreso: diciembre-2008
Mensajes: 738
Antigüedad: 15 años, 11 meses
Puntos: 15
Porque este plugin reconoce el class y no el id

Tengo un problema con el plugin Pretty Photo. Sucede que si a un div le pongo un class y le especifico el .class en el código jQuery para que me haga el efecto si funciona. Pero no funciona si al div le pongo un "id" y le especifico el #id. No entiendo, por lo que sé de jQuery, esto si debería de funcionar pero no lo hace.

Necesito que sea en ID porque tengo otro código Javascript que es un carrusel que a fuerzas le tengo que poner el ID, entonces cuando le de clic en las fotos quiero que trabaje el Pretty Photo.

Saludos

Código:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="css/photo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/carrusel1.js"></script>
<script type="text/javascript" src="js/carruselconf.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
		<script type="text/javascript" charset="utf-8">

//AQUÍ ES DONDE ESPECIFICO EL ID O LA CLASE A LLAMAR DESDE EL DOM
		$(document).ready(function(){
			$("#carousel1 a[rel^='prettyPhoto']").prettyPhoto({theme:'facebook'});
		});
		</script>
<title>Entusiasma</title>
</head>

<body>
    <div id="entusiasma">
    </div>
    <div id="menu">
    </div>

//AQUÍ ESTÁ EL ID AL QUE ESTOY LLAMANDO
    <div id="carousel1"> 
		  <a href="images/1.jpg" rel="prettyPhoto[gallery1]" title=""><img alt="imagen 1" src="images/thumb1.jpg" /></a> 
          <a href="images/2.jpg" rel="prettyPhoto[gallery1]" title=""><img alt="imagen 1" src="images/thumb2.jpg" /></a> 
          <a href="images/3.jpg" rel="prettyPhoto[gallery1]" title=""><img alt="imagen 1" src="images/thumb3.jpg" /></a>
          <a href="images/4.jpg" rel="prettyPhoto[gallery1]" title=""><img alt="imagen 1" src="images/thumb4.jpg" /></a>
          <a href="images/5.jpg" rel="prettyPhoto[gallery1]" title=""><img alt="imagen 1" src="images/thumb5.jpg" /></a>		  
		  </div>


</body>
</html>
  #2 (permalink)  
Antiguo 18/08/2010, 14:22
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 14 años, 11 meses
Puntos: 65
Respuesta: Porque este plugin reconoce el class y no el id

a mi me funciona con un id
será por el otro plugin? probaste solo con el plugin Pretty ?
  #3 (permalink)  
Antiguo 18/08/2010, 15:32
 
Fecha de Ingreso: diciembre-2008
Mensajes: 738
Antigüedad: 15 años, 11 meses
Puntos: 15
Respuesta: Porque este plugin reconoce el class y no el id

¿No será que el otro está bloqueando el trabajo del Pretty?.

Este es el plugin del carrusel

Este es el de la configuración:


Código:
//Inicialicia el/los carousel/es

var carousel1 
function mueveCarousel(){
		carousel1.mueve()
}
onload = function(){
	carousel1 = new tunaCarousel('carousel1',1, 'rtl')
	carousel1.controlesCarousel()
	tiempo = setInterval(mueveCarousel, 1)
}
Y este es todo el código
Código:
function tunObtObj(ide){
	return document.getElementById(ide)
}
var tunaCarousel = function (ideContenedor, desplazamiento, direccion){
	this.contenedor = tunObtObj(ideContenedor);
	this.contenedor.style.position = 'relative'
	this.contenedor.style.overflow = 'hidden'
	this.anchoContenedores = 0;
	this.ima_plei = 'plei.jpg'
	this.ima_pausa = 'pausa.jpg'
	var contenedor1 = document.createElement('div');
	contenedor1.setAttribute('id', ideContenedor + "_cont1");
	var Elementos = this.contenedor.childNodes
	var numElementos = Elementos.length;
	this.rec = 10
	this.rec2 = true
	this.direccion  = direccion
	this.mas = this.direccion == 'rtl' ? '+' :'-'
	this.masmas = this.direccion == 'rtl' ? '++' :'--'
	this.menos = this.direccion == 'rtl' ? '-' :'+'
	this.menosmenos = this.direccion == 'rtl' ? '--' :'++'
	this.menosIgual = this.direccion == 'rtl' ? '-=' :'+='
	this.masIgual = this.direccion == 'rtl' ? '+=' :'-='
	
	var arrayImas = new Array();
	for(m = numElementos -1 ; m >= 0; m--){
		if(Elementos[m].tagName == 'IMG' || Elementos[m].tagName == 'A' ){
			if(Elementos[m].nodeType == 1 && Elementos[m].tagName == 'A' && Elementos[m].hasChildNodes()) {
				var elHijos = Elementos[m].childNodes.length;
				for(n = 0; n < elHijos; n++){
					if(Elementos[m].childNodes[n].tagName == 'IMG'){
						this.anchoContenedores += Elementos[m].childNodes[n].clientWidth;
					}
					else if(Elementos[m].childNodes[n].tagName != 'IMG' && Elementos[m].childNodes[n].tagName != 'A'){
						Elementos[m].removeChild(Elementos[m].childNodes[n])
						elHijos--; n--
					}
				}
			}
			else{
				this.anchoContenedores += Elementos[m].clientWidth
			}
			var Nodo = Elementos[m]; 
			var clonNodo = Nodo.cloneNode(true);
			arrayImas[arrayImas.length] = clonNodo
		}
		this.contenedor.removeChild(Elementos[m])
	}
	for(m = arrayImas.length -1 ; m >= 0 ; m--){
		contenedor1.appendChild(arrayImas[m])
		
	}
	with(contenedor1.style){
		width = this.anchoContenedores + "px";
		left = 0 + 'px'
		position = 'absolute'
	}
	this.contenedor.setAttribute('marcha', 1)
	this.contenedor.setAttribute('stop', 0)
	this.contenedor.appendChild(contenedor1)
	this.cont1 = tunObtObj(contenedor1.getAttribute('id'))
	this.pos1 = 0;
	this.pos2 = this.direccion == 'rtl' ? this.anchoContenedores : (this.anchoContenedores * -1)
	contenedor2 = this.cont1.cloneNode(true);
	contenedor2.setAttribute('id', ideContenedor + "_cont2");
	contenedor2.style.left = this.anchoContenedores + 'px'
	this.contenedor.appendChild(contenedor2)
	this.cont2 = tunObtObj(contenedor2.getAttribute('id'))
	
	this.mueve = function (){
		if( this.contenedor.getAttribute('stop') == 1) return false
		if(this.contenedor.getAttribute('marcha') == 1){
			eval('this.pos1 ' + this.menosIgual +' desplazamiento')
			eval('this.pos2 ' + this.menosIgual + 'desplazamiento')
			this.rec = 10
			this.rec2 = true
		}
		else{
			if(this.rec > 0 && this.rec2 == true){
				eval('this.pos1 ' + this.masIgual +' desplazamiento')
				eval('this.pos2 ' + this.masIgual + ' desplazamiento')
				this.rec--
			}
			else if(this.rec == 0){
				this.rec = -10
				this.rec2 = false
			}
			else if(this.rec < 0&& this.rec2 == true){
				eval('this.pos1 ' + this.masIgual + ' desplazamiento')
				eval('this.pos2 ' + this.masIgual + ' desplazamiento')
				this.rec++
			}
		}
		if(this.direccion == 'rtl'){
			if(this.pos1 < (0 - this.anchoContenedores)) this.pos1 = this.pos2 + this.anchoContenedores
			if(this.pos2 < (0 - this.anchoContenedores)) this.pos2 = this.pos1 + this.anchoContenedores
		}
		else{
			if(this.pos1 > (this.anchoContenedores)) this.pos1 = this.pos2 - this.anchoContenedores
			if(this.pos2 > (this.anchoContenedores)) this.pos2 = this.pos1 - this.anchoContenedores
		}
		this.cont1.style.left = this.pos1 + "px"
		this.cont2.style.left = this.pos2 + "px"
	
	}
	this.cont1.onmouseover = function(){
		this.parentNode.setAttribute('marcha', 0)
	}
	this.cont2.onmouseover = function(){
		this.parentNode.setAttribute('marcha', 0)
	}
	this.cont1.onmouseout = function(){
		this.parentNode.setAttribute('marcha', 1)
	}
	this.cont2.onmouseout = function(){
		this.parentNode.setAttribute('marcha', 1)
	}






	this.controles = function(){
		accion = this.getAttribute('accion');
		if(accion == 'pausar'){
			this.parentNode.parentNode.setAttribute('stop', 1)
			this.setAttribute('src', this.getAttribute('ima_plei'));
			this.setAttribute('alt', 'Play');
			this.setAttribute('title', 'Play');
			this.setAttribute('accion', 'plei');
		
		}
		else if(accion == 'plei'){
			this.parentNode.parentNode.setAttribute('stop', 0)
			this.setAttribute('src', this.getAttribute('ima_pausa'));
			this.setAttribute('alt', 'Detener')
			this.setAttribute('title', 'Detener')
			this.setAttribute('accion', 'pausar')
			
		}
	}




	this.controlesCarousel = function(){
		contenedor_controles = document.createElement('span');
		contenedor_controles.style.position = 'absolute';
		contenedor_controles.style.cursor = 'pointer';
		contenedor_controles.setAttribute('id', ideContenedor + '_Controles')
		ima_controles = document.createElement('img')
		ima_controles.setAttribute('src', this.ima_pausa)
		ima_controles.setAttribute('alt', 'Detener')
		ima_controles.setAttribute('title', 'Detener')
		ima_controles.setAttribute('accion', 'pausar')
		ima_controles.setAttribute('ima_pausa', this.ima_pausa)
		ima_controles.setAttribute('ima_plei', this.ima_plei)
		ima_controles.onclick = this.controles
		contenedor_controles.appendChild(ima_controles)
		this.contenedor.appendChild(contenedor_controles)
		
	}

}

Etiquetas: class, plugin, reconoce
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 08:57.