sam_p_lay

Distinguished
Mar 26, 2010
81
0
18,580
Hi people, can you tell me what I'm doing wrong here? The following is opening in a Fancybox iframe lightbox:

[cpp]<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$('#gallery-back-button').click(function(){
$(this).fancybox.prev();
});
$('#gallery-next-button').click(function(){
$(this).fancybox.next();
});
</script>
<style>
...
.button {
display:block;
position:relative;
float:left;
height:36px;
background-repeat:no-repeat;
background-position:top;
text-indent:-9999px;
}
.button:hover {
background-position:0px -36px;
}
.back-button {
margin:0px 335px 0px 10px;
width:210px;
background-image:url(../../../images/buttons/back.png);
text-indent:-9999px;
}
.next-button {
width:210px;
background-image:url(../../../images/buttons/next.png);
text-indent:-9999px;
}
</style>
</head>
<body>
...
<div id="buttons">
<a href="#" id="gallery-back-button" class="button back-button">back</a>
<a href="#" id="gallery-next-button" class="button next-button">next</a>
</div>
...
</body>
</html>[/cpp]

When clicked, buttons do nothing.