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<head>
<title>MV Management</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta name="author" content="PC Service Company"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<meta http-equiv="Content-language" content="es" />
<link href="style.css" rel="stylesheet" type="text/css" />
<!--FancyBox-->
<script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("a[rel=example_group]").fancybox
({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts)
{
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
$("#various1").fancybox({
'width' : '60%',
'height' : '100%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
$("#various2").fancybox({
'width' : '60%',
'height' : '100%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
$("#various3").fancybox({
'width' : '60%',
'height' : '100%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
$("#various4").fancybox({
'width' : '60%',
'height' : '100%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
$("#various5").fancybox({
'width' : '60%',
'height' : '100%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
$("#various6").fancybox({
'width' : '60%',
'height' : '100%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
</script>
<!--End FancyBox-->
<!--Inicio Carrusel-->
<link rel="stylesheet" type="text/css" href="carrusel/stylesheet/horizontal.css" />
<script language="javascript" type="text/javascript" src="carrusel/script/mootools-1.2.1-core.js"></script>
<script language="javascript" type="text/javascript" src="carrusel/script/mootools-1.2-more.js"></script>
<script language="javascript" type="text/javascript" src="carrusel/script/slideitmoo-1.1.js"></script>
<script language="javascript" type="text/javascript">
window.addEvents({
'domready': function(){
/* thumbnails example , div containers */
new SlideItMoo({
overallContainer: 'SlideItMoo_outer',
elementScrolled: 'SlideItMoo_inner',
thumbsContainer: 'SlideItMoo_items',
itemsVisible:4,
elemsSlide:3,
duration:300,
itemsSelector: '.SlideItMoo_element',
itemWidth: 158,
showControls:1,
startIndex:5,
onChange: function(index){
}
});
}
});
</script>
<!--Fin Carrusel-->
</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!