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 -->
Alguna solucion, idea, ayuda? o una piedrita, cualquier cosa me sirve a esta altura!
Un abrazo!
