FancyBox+ProblemaHola amigos, espero me puedan ayudar con mi problema ya que soy bastante novato! Estoy haciendo mi web, en la cual tengo una galería flash... que no me convence mucho... así que decidí cambiarla por una fancybox...
La galería la arme en un html a parte y funciona perfectamente, pero cuando la pongo en el div de mi web no funciona y me abre las imágenes en una nueva pestaña en ves de abrirla de manera modal..
Esto ya me paso con un slider que también quería agregar a mi web.. pero tampoco funcionaba...
Yo creo que tengo algún error de compatibilidad con los elementos java que hay ahora en mi pagina y los que intento insertar...
Puede ser que sea asi?? o estoy equivocado?
Este es el codigo de el html del fancybox... que funciona perfectamente... salvo cuando lo integro a mi web...
Código:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<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" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
$(document).ready(function() {
$("a[rel=example_group]").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
});
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body onload="MM_preloadImages('example/9_s2.jpg','images/191x191/MARCA/union2.jpg')">
<div id="portfolio_galeria">
<p><img src="images/191x191/identidad.png" alt="identidad" width="191" height="191" hspace="0" vspace="0" border="0" align="top" />
<!-- Foto 1 --><a rel="example_group" href="images/640x480/MARCA/union.jpg" title="Lorem ipsum dolor sit amet" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/191x191/MARCA/union2.jpg',1)"><img src="images/191x191/MARCA/union1.jpg" width="191" height="191" hspace="0" vspace="0" border="0" align="top" id="Image5" /></a>
<a rel="example_group" href="images/640x480/MARCA/chines_ediciones.jpg" title="Lorem ipsum dolor sit amet" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/191x191/MARCA/chines_ediciones2.jpg',1)"><img src="images/191x191/MARCA/chines_ediciones1.jpg" width="191" height="191" hspace="0" vspace="0" border="0" align="top" id="Image6" /></a>
<a rel="example_group" href="images/640x480/MARCA/desa.jpg" title="Lorem ipsum dolor sit amet" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/191x191/MARCA/desa2.jpg',1)"><img src="images/191x191/MARCA/desa1.jpg" width="191" height="191" hspace="0" vspace="0" border="0" align="top" id="Image7" /></a>
<!-- Foto 4 -->
<a rel="example_group" href="images/640x480/MARCA/punto.jpg" title="Lorem ipsum dolor sit amet" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','images/191x191/MARCA/punto2.jpg',1)"><img src="images/191x191/MARCA/punto1.jpg" width="191" height="191" hspace="0" vspace="0" border="0" align="top" id="Image8" /></a>
<a rel="example_group" href="images/640x480/MARCA/rojas.jpg" title="Lorem ipsum dolor sit amet" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/191x191/MARCA/rojas2.jpg',1)"><img src="images/191x191/MARCA/rojas1.jpg" width="191" height="191" hspace="0" vspace="0" border="0" align="top" id="Image9" /></a>
<a rel="example_group" href="images/640x480/MARCA/chines_semillas.jpg" title="Lorem ipsum dolor sit amet" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','images/191x191/MARCA/chines2.jpg',1)"><img src="images/191x191/MARCA/chines1.jpg" width="191" height="191" hspace="0" vspace="0" border="0" align="top" id="Image10" /></a>
<a rel="example_group" href="images/640x480/MARCA/super.jpg" title="Lorem ipsum dolor sit amet" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','images/191x191/MARCA/super2.jpg',1)"><img src="images/191x191/MARCA/super1.jpg" width="191" height="191" hspace="0" vspace="0" border="0" align="top" id="Image11" /></a>
<a rel="example_group" href="images/640x480/MARCA/fxfoto.jpg" title="Lorem ipsum dolor sit amet" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','images/191x191/MARCA/fxfoto2.jpg',1)"><img src="images/191x191/MARCA/fxfoto1.jpg" width="191" height="191" hspace="0" vspace="0" border="0" align="top" id="Image12" /></a>
<a rel="example_group" href="images/640x480/MARCA/rey_blanco.jpg" title="Lorem ipsum dolor sit amet" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','images/191x191/MARCA/rey_blanco2.jpg',1)"><img src="images/191x191/MARCA/rey_blanco1.jpg" width="191" height="191" hspace="0" vspace="0" border="0" align="top" id="Image13" />/a>
<a rel="example_group" href="images/640x480/MARCA/365.jpg" title="Lorem ipsum dolor sit amet" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','images/191x191/MARCA/diario2.jpg',1)"><img src="images/191x191/MARCA/diario1.jpg" width="191" height="191" hspace="0" vspace="0" border="0" align="top" id="Image14" /></a>
</p>
</div>
Y en mi firma esta mi pagina para q miren el código es muy largo y complicado para pegarlo acá..
Por favor contéstenme.. es la tercera ves que pregunto cosas y las anteriores nadie contesto!
desde ya gracias y disculpen las molestias