jQuery y Prototpe

sebas033 · #1 (**permalink**) 19/12/2011, 18:49

Hola chic@s...

Me encuentro con un problema, estoy usando dos plugins: jQuery y Lightbox. Como sabrán, Lightbox utiliza Prototype, y eso genera problemas con jQuery por el famoso "$".

Ahora, estuve leyendo y al parecer, este conflicto se puede solucionar muy bien haciendo un par de cosas, pero el problema es que no entiendo qué hay que hacer...

Uso jQuery para animar sutilmente un menú, y Lightbox para cargar un mapa de Google. El tema es que por existir un conflicto, solo Lightbox funciona.

En éste artículo explican cómo hacer, pero la verdad, no manejo JS y me resulta imposible entender... me ayudan un toque porfa...?

Acá el código de la página:

Código HTML:

<!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" />
<title></title>
<style type="text/css">
body {
	background-color: #ebeced;
	text-align: center;
	margin: 0;
}
</style>
<link href="css/uno.css" rel="stylesheet" type="text/css" />
<link href="css/barramenu.css" rel="stylesheet" type="text/css" />
<link href="css/dos.css" rel="stylesheet" type="text/css" />
<link href="css/empresa.css" rel="stylesheet" type="text/css" />
<link href="css/lightwindow.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div class="body-elastico">
<!--  <div class="body-izq">
    <div class="body-izq-1">
    </div>
    <div class="body-izq-2"></div>
  </div>-->
 <div class="body-med">
   <div class="header">
   </div>
   <div class="barramenu">
   	<ul id="menu">
	<li><a href="index.html" class="inicio"><span></span></a></li>
	<li><a href="empresa.html" class="empresa"><span></span></a></li>
	<li><a href="servicios.html" class="servicios"><span></span></a></li>
	<li><a href="productos.html" class="productos"><span></span></a></li>
	<li><a href="obras.html" class="galeria"><span></span></a></li>
	<li><a href="contactenos.html" class="contactenos"><span></span></a></li>
	</ul>
   </div>
   <div class="barritasocial"> <a href="#"><img src="img/btn-fb.png" alt="Síganos en Facebook" width="40" height="46" border="0" /></a>
    <a href="#"><img src="img/btn-gp.png" alt="Síganos en Google+" width="40" height="46" border="0" /></a></div>
<div class="contenedorMedioSinPadding">
  <div class="medio-izq">
  </div>
  <div class="medio-der">
    <div class="medio-der-texto">
    </div>
  </div>
</div>
   <div class="contenedorAbajoEmpresa">
   </div>
   <div class="abajo-pequenios">
   </div>
 </div>
</div>
<!-- -->
<!-- Aca empieza el lio...... -->
<!-- -->
<!-- Include jQuery Library -->
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<!-- Let's do the animation -->
<script type="text/javascript">
	$(function() {
		// set opacity to nill on page load
		$("ul#menu span").css("opacity","0");
		// on mouse over
		$("ul#menu span").hover(function () {
			// animate opacity to full
			$(this).stop().animate({
				opacity: 1
			}, 'slow');
		},
		// on mouse out
		function () {
			// animate opacity to nill
			$(this).stop().animate({
				opacity: 0
			}, 'slow');
		});
	});
</script>
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/effects.js"></script>
<script type="text/javascript" src="javascript/lightwindow.js"></script>

</body>
</html>

ryugen · #2 (**permalink**) 19/12/2011, 20:04

La funcion "noConflict" de jquery lo que permite es asignar a otro identificador (nombre de variable) la funcion pesos.
Entonces por ejemplo si yo hago lo siguiente:

Código Javascript:

Ver originalvar j$ = jQuery.noConflict();

Estoy haciendo que en lugar de referirme a jQuery como "$" me voy a referir a esa funcion como "j$". Entonces cada llamada que necesite de ese framework la hará con ese identificador. Como por ejemplo:

Código Javascript:

Ver originalj$('div').hide();
j$('div').addClass('something');

En tu caso:

Código Javascript:

Ver originalvar j$ = jQuery.noConflict();
j$(function() {
        // set opacity to nill on page load
        j$("ul#menu span").css("opacity","0");
        // on mouse over
        j$("ul#menu span").hover(function () {
            // animate opacity to full
            j$(this).stop().animate({
                opacity: 1
            }, 'slow');
        },
        // on mouse out
        function () {
            // animate opacity to nill
            j$(this).stop().animate({
                opacity: 0
            }, 'slow');
        });
    });

sebas033 · #3 (**permalink**) 19/12/2011, 21:54

Vos me querés decir que reemplazando '$' por 'j$' y haciendo llamada a esa función se acabaría el conflicto con Lightbox? Voy a estar probándolo....

Desde ya, agradezco muchísimo tu atención ayuda. Hace unos años tuve un problemita muy similar y nadie me pudo ayudar, ahora fue cuestión de un par de horas...

sebas033 · #4 (**permalink**) 19/12/2011, 22:18

Como diría Apache... "It works!"...

Gracias loco!