Foros del Web » Programando para Internet » Javascript »

Problema al poner dos códigos de javascript en la misma pagina

 Estas en el tema de Problema al poner dos códigos de javascript en la misma pagina en el foro de Javascript en Foros del Web. hola, bueno en la web que estoy haciendo tengo 2 implementaciones de códigos, el Fancybox y un Carrusel horizontal. El problema es que entre estos ...
  #1 (permalink)  
Antiguo 25/03/2011, 09:09
Avatar de ras_chalo  
Fecha de Ingreso: junio-2010
Mensajes: 369
Antigüedad: 14 años, 6 meses
Puntos: 6
Exclamación Problema al poner dos códigos de javascript en la misma pagina
hola, bueno en la web que estoy haciendo tengo 2 implementaciones de códigos, el Fancybox y un Carrusel horizontal.

El problema es que entre estos 2 se crean problemas y uno de los 2 no funciona cuando está el otro... según cual ponga segundo es el que funciona. me explico; si pongo el código del Fancybox y luego el del Carrusel, funciona el del carrusel...

dejo el código del Head:
Código Javascript: 
Ver original
  1. <head>
  2.         <title>MV Management</title>
  3.         <link rel="icon" href="favicon.ico" type="image/x-icon">
  4.         <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  5.         <meta name="author" content="PC Service Company"/>
  6.         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >   
  7.         <meta http-equiv="Content-language" content="es" />
  8. <link href="style.css" rel="stylesheet" type="text/css" />
  9. <!--FancyBox-->    
  10.     <script>
  11.         !window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
  12.     </script>
  13.     <script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
  14.     <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
  15.     <link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
  16.     
  17.     <script type="text/javascript">
  18.         $(document).ready(function() {
  19.  
  20.             $("a[rel=example_group]").fancybox
  21.             ({
  22.                 'transitionIn'      : 'none',
  23.                 'transitionOut'     : 'none',
  24.                 'titlePosition'     : 'over',
  25.                 'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) 
  26.                 {
  27.                     return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
  28.                 }
  29.             });
  30.  
  31.             
  32.             $("#various1").fancybox({
  33.                 'width'             : '60%',
  34.                 'height'            : '100%',
  35.                 'autoScale'         : false,
  36.                 'transitionIn'      : 'none',
  37.                 'transitionOut'     : 'none',
  38.                 'type'              : 'iframe'
  39.             });
  40.             
  41.             $("#various2").fancybox({
  42.                 'width'             : '60%',
  43.                 'height'            : '100%',
  44.                 'autoScale'         : false,
  45.                 'transitionIn'      : 'none',
  46.                 'transitionOut'     : 'none',
  47.                 'type'              : 'iframe'
  48.             });
  49.             
  50.             $("#various3").fancybox({
  51.                 'width'             : '60%',
  52.                 'height'            : '100%',
  53.                 'autoScale'         : false,
  54.                 'transitionIn'      : 'none',
  55.                 'transitionOut'     : 'none',
  56.                 'type'              : 'iframe'
  57.             });
  58.             
  59.             $("#various4").fancybox({
  60.                 'width'             : '60%',
  61.                 'height'            : '100%',
  62.                 'autoScale'         : false,
  63.                 'transitionIn'      : 'none',
  64.                 'transitionOut'     : 'none',
  65.                 'type'              : 'iframe'
  66.             });
  67.             
  68.             $("#various5").fancybox({
  69.                 'width'             : '60%',
  70.                 'height'            : '100%',
  71.                 'autoScale'         : false,
  72.                 'transitionIn'      : 'none',
  73.                 'transitionOut'     : 'none',
  74.                 'type'              : 'iframe'
  75.             });
  76.             
  77.             $("#various6").fancybox({
  78.                 'width'             : '60%',
  79.                 'height'            : '100%',
  80.                 'autoScale'         : false,
  81.                 'transitionIn'      : 'none',
  82.                 'transitionOut'     : 'none',
  83.                 'type'              : 'iframe'
  84.             });
  85.                                     
  86.         });
  87.     </script>
  88.     <!--End FancyBox-->
  89.  
  90.  
  91.  
  92. <!--Inicio Carrusel-->
  93. <link rel="stylesheet" type="text/css" href="carrusel/stylesheet/horizontal.css" />
  94. <script language="javascript" type="text/javascript" src="carrusel/script/mootools-1.2.1-core.js"></script>
  95. <script language="javascript" type="text/javascript" src="carrusel/script/mootools-1.2-more.js"></script>
  96. <script language="javascript" type="text/javascript" src="carrusel/script/slideitmoo-1.1.js"></script>
  97. <script language="javascript" type="text/javascript">
  98.     window.addEvents({
  99.         'domready': function(){
  100.             /* thumbnails example , div containers */
  101.             new SlideItMoo({
  102.                         overallContainer: 'SlideItMoo_outer',
  103.                         elementScrolled: 'SlideItMoo_inner',
  104.                         thumbsContainer: 'SlideItMoo_items',        
  105.                         itemsVisible:4,
  106.                         elemsSlide:3,
  107.                         duration:300,
  108.                         itemsSelector: '.SlideItMoo_element',
  109.                         itemWidth: 158,
  110.                         showControls:1,
  111.                         startIndex:5,
  112.                         onChange: function(index){
  113.                             
  114.                         }
  115.             
  116.             });
  117.         }
  118.     });
  119. </script>
  120. <!--Fin Carrusel-->
  121.  
  122.  
  123.  
  124. </head>

Bueno se que no es de mucha ayuda el código, pero en ese caso, me funciona el Carrusel y no el efecto Fancybox que es el que esta primero.

Esto por que pasa?, como se puede solucionar?...

Por favor ayúdenme en este lío que tengo...
Saludos y espero sus respuestas!
  #2 (permalink)  
Antiguo 25/03/2011, 09:57
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 14 años, 7 meses
Puntos: 63
Respuesta: Problema al poner dos códigos de javascript en la misma pagina
Ese es el problema de las librerías o frameworks que no has elaborado tu mismo... no sabes como funcionan a nivel interno . me imagino que debe ser algún tipo de problemas con variable globales, funciones o pseudoclases compartidas, ¿como solucionarlo? viendo el código de todas las librerías, ver que variables o funcione comparten y cambiarles de nombre a una de las dos.

Me imagino que ese puede ser el problema, pero realmente no soy aficionado a las cajas negras, perdón frameworks, asi que no se si pueda ser alguna otra cosa.
__________________
Programar apasiona y lo que apasiona es un arte, por lo tanto programar es un arte.

Quiero karma para en mi próxima vida ser un billonario bien dotado con alas.

Etiquetas: Ninguno
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 19:48.