Bxslider e Fancybox

tgirl

unread,

Oct 5, 2011, 2:53:33 PM10/5/11

to fancybox

Hi all,

I'm having quite a bit of trouble trying to use bxslider and fancybox
together. I tried everything but nothing seems to work.

Here's the code I'm using:

<!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" />
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=1040" />

<link rel="stylesheet" type="text/css" media="screen" href="css/
style.css" />

<link rel="stylesheet" type="text/css" href="/fancybox/
jquery.fancybox-1.3.4.css" media="screen" />

<script type="text/javascript" src="jquery/jquery-1.5.2.min.js"></
script>

<script type="text/javascript" src="/fancybox/
jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="/fancybox/
jquery.easing-1.4.pack.js"></script>

<script type="text/javascript" src="jquery/jquery.bxSlider.js"></
script>

<script type="text/javascript">
$(document).ready(function(){
$('#slider1').bxSlider({
displaySlideQty: 1,
moveSlideQty: 1
});
});

$(document).ready(function() {

$("a.colecao").fancybox();
});

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>

<title>CAPI</title>
</head>

<body onload="MM_preloadImages('images/menu_02_2.png','images/
menu_03_2.png','images/menu_04_2.png','images/menu_05_2.png','images/
menu_06_2.png')">
<br><br>
<table width="1000" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td><table width="1000" border="0" align="left" cellpadding="0"
cellspacing="0">
<tr>
<td valign="bottom"><a href="lookbook.html"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Image9','','images/menu_02_2.png',1)"><img
src="images/menu_02.png" name="Image9" width="121" height="41"
border="0" id="Image9" /></a></td>
<td valign="bottom"><a href="catalogo.html"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Image10','','images/menu_03_2.png',1)"><img
src="images/menu_03.png" name="Image10" width="139" height="41"
border="0" id="Image10" /></a></td>
<td valign="bottom"><a href="#"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Image11','','images/menu_04_2.png',1)"><img
src="images/menu_04.png" name="Image11" width="117" height="41"
border="0" id="Image11" /></a></td>
<td valign="bottom"><a href="#"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Image12','','images/menu_05_2.png',1)"><img
src="images/menu_05.png" name="Image12" width="95" height="41"
border="0" id="Image12" /></a></td>
<td valign="bottom"><a href="#"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Image13','','images/menu_06_2.png',1)"><img
src="images/menu_06.png" name="Image13" width="115" height="41"
border="0" id="Image13" /></a></td>
<td width="614"> </td>
<td width="146"><a href="home.html"><img src="images/logo.png"
width="146" height="49" border="0" /></a></td>
</tr>
</table></td>
</tr>
<tr>
<td><div class="demo-wrap">
<div id="slider1" class="multiple">
<div class="colecao-slides">
<li><a href="images/image-1.jpg" class="colecao"><img src="images/
colecao_01_1.jpg" width="100" height="100" /></a>
</li>
<li><img src="images/colecao_01_2.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_3.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_4.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_5.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_6.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_7.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_8.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_9.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_10.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_11.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_12.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_13.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_14.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_15.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_16.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_17.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_18.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_19.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_20.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_21.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_22.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_23.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_24.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_25.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_26.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_27.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_28.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_29.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_30.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_31.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_32.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_33.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_34.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_35.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_36.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_37.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_38.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_39.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_40.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_41.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_42.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_43.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_44.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_45.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_46.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_47.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_48.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_49.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_01_50.jpg" width="100" height="100" />
</li>
</div>
<div class="colecao-slides">
<li><img src="images/colecao_02_1.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_2.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_3.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_4.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_5.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_6.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_7.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_8.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_9.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_10.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_11.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_12.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_13.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_14.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_15.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_16.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_17.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_18.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_19.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_20.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_21.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_22.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_23.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_24.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_25.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_26.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_27.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_28.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_29.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_30.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_31.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_32.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_33.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_34.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_35.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_36.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_37.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_38.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_39.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_40.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_41.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_42.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_43.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_44.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_45.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_46.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_47.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_48.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_49.jpg" width="100" height="100" />
</li>
<li><img src="images/colecao_02_50.jpg" width="100" height="100" />
</li>
</div>
</div>
</div></td></tr></table>
</body>
</html>

Please, help me!!

Thanks in advance.

tgirl

unread,

Oct 5, 2011, 4:52:32 PM10/5/11

to fancybox

Nevermind, I just got it to work... somehow the code in the fancybox
website is wrong... it shoudn't have a "/" before the URL of the
files, like this:

When I removed this "/" before fancybox it worked.

JFK

unread,

Oct 6, 2011, 1:11:22 PM10/6/11

to fancybox

glad to hear you solved your problem but as a point of clarification,
the code in the fancybox website is not wrong at all
it may worth to read further about "paths" (absolute and relative) so
you will understand what the "/" (slash) is used for
http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
we are all always learning something new ;o)

Reply all

Reply to author

Forward