Buenos dias, tengo un problema que la verdad me da bronca ya! no puede ser, siempre me encuentro con algun problema! ya me estoy cansando!
El tema es asi, tengo una pagina donde el menu esta hecho con efectos jquery y le quiero agregar una galeria de imagenes tmb en jquery, el problema es que si pongo solamente los .js de la galeria ya me deja de funcionar el menu!
les muestro el codigo
Código HTML:
<!-- BEGIN todo -->
<!-- BEGIN todo -->
<!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>Documento sin título</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<link href="galleria.css" rel="stylesheet" type="text/css" media="screen">
<!-- ESTOS SON DEL SLIDER -->
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.bgpos.js"></script>
<!-- ESTOS SON DEL SLIDER -->
<!-- ESTOS SON DE LA GALERIA -->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.galleria.js"></script>
<!-- ESTOS SON DE LA GALERIA -->
<script type="text/javascript">
<!-- ESTOS SON DE LA GALERIA -->
$(document).ready(function(){
$('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability
$('ul.gallery_demo').galleria({
history : true, // activates the history object for bookmarking, back-button etc.
clickNext : true, // helper for making the image clickable
insert : '#main_image', // the containing selector for our main image
onImage : function(image,caption,thumb) { // let's add some image effects for demonstration purposes
// fade in the image & caption
image.css('display','none').fadeIn(1000);
caption.css('display','none').fadeIn(1000);
// fetch the thumbnail container
var _li = thumb.parents('li');
// fade out inactive thumbnail
_li.siblings().children('img.selected').fadeTo(500,0.3);
// fade in active thumbnail
thumb.fadeTo('fast',1).addClass('selected');
// add a title for the clickable image
image.attr('title','Next image >>');
},
onThumb : function(thumb) { // thumbnail effects goes here
// fetch the thumbnail container
var _li = thumb.parents('li');
// if thumbnail is active, fade all the way.
var _fadeTo = _li.is('.active') ? '1' : '0.3';
// fade in the thumbnail when finnished loading
thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
// hover effects
thumb.hover(
function() { thumb.fadeTo('fast',1); },
function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
)
}
});
});
<!-- ESTOS SON DE LA GALERIA -->
<!-- ESTOS SON DEL MENU -->
$(function(){
$('#a a')
.css( {backgroundPosition: "-20px 35px"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "-20px 35px"})
}})
})
$('#b a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "0 0"})
}})
})
$('#c a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
})
$('#d a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
})
});<!-- ESTOS SON DEL MENU -->
</script>
<style media="screen,projection" type="text/css">
/* BEGIN DEMO STYLE */
*{margin:0;padding:0}
body{padding:20px;text-align:center;background:black;color:#bba;font:80%/140% georgia,serif;}
a{color:#348;text-decoration:none;outline:none;}
a:hover{color:#67a;}
.caption{font-style:italic;color:#887;}
.demo{position:relative;margin-top:2em;}
.gallery_demo{width:702px;margin:0 auto;}
.gallery_demo li{width:68px;height:50px;border:3px double #111;margin: 0 2px;background:#000;}
.gallery_demo li div{left:240px}
.gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}
#main_image{margin:0 auto 60px auto;height:438px;width:700px;background:black;}
#main_image img{margin-bottom:10px;}
.nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
.info{text-align:left;width:700px;margin:30px auto;border-top:1px dotted #221;padding-top:30px;}
.info p{margin-top:1.6em;}
</style>
</head>
<body>
<div id="contenedor">
<div id="recuadro">
<div id="izquierda">
<div id="logo">
<div align="center"><img src="imagenes/icono.png" width="162" height="150" /></div>
</div>
<br />
<br />
<br />
<div id="menu"> <ul id="a">
<li><a href="index.php">Inicio</a></li><br><br>
<li><a href="servicios.php">Servicios</a></li><br><br>
<li><a href="nosotros.php">Nosotros</a></li><br><br>
<li><a href="remeras.php">Remeras</a></li><br><br>
<li><a href="contacto.php">Contacto</a></li><br><br>
</ul></div>
</div><!-- izquierda -->
<div id="centro">
<div align="center">
<div id="titulo"><br />
Triskel* Indumentaria<br />
</div>
<h1> </h1>
<div class="demo">
<div id="main_image"></div>
<ul class="gallery_demo_unstyled">
<li><img src="imagenes/74948599v9_480x480_Front_Color-White.jpg" alt="Flowing Rock" title="Flowing Rock Caption"></li>
<li><img src="imagenes/img.jpg" alt="Stones" title="Stones - from Apple images"></li>
<li class="active"><img src="imagenes/imga.jpg" alt="Grass Blades" title="Apple nature desktop images"></li>
<li><img src="imagenes/poker.jpg" alt="Ladybug" title="Ut rutrum, lectus eu pulvinar elementum, lacus urna vestibulum ipsum"></li>
</ul>
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">« previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next »</a></p>
</div>
<div class="info">
<h2> </h2>
</div></div>
</div><!-- centro -->
</div><!-- recuadro -->
</div><!-- Contenedor -->
</body>
</html>
</body>
</html>
<!-- END todo --> La verdad no se como deberia ir, cual deberia dejar, cual sacar, cual es reemplazable, como arreglar esto, no se!
Alguna solucion, idea, ayuda? o una piedrita, cualquier cosa me sirve a esta altura!
Un abrazo!