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>