Problem with photoalbums, stuck
Doing a website with a photoalbum and I'm using jquery and fancybox.
It's mainly built from two different java-functions, one that handles the transition between albums and one that handles the fancybox-part. The problem is that when you change to next album and tries to open it, it still opens the first album.
I've mady one separate fancybox-function for each album which are controlled by the class name. Whenever I switch album the classname of the fancybox-link is changed and it's dependant on the album ID. So to open album with ID 9 class named open_fancybox9 is called, for album 11 open_fancybox11 is called etc. When i run firebug the classname of the fancybox-link seems to be changing correctly but yet it always seems to call the function open_fancybox11 (the latest).
I'm not getting any errors in firebug consol either
the url is jnintensified.com
(pass: tesTar)
Code for opening the album (the first statement $(".fancybox").fancybox is for the other pics who doesnt open fancybox manually):
Code:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
scrolling : 'no',
openEffect: 'elastic',
closeEffect: 'elastic',
nextEffect: 'fade',
prevEffect: 'fade',
mouseWheel: true,
autoPlay: false,
closeBtn: false,
openSpeed: 500,
nextSpeed: 500,
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
});
<?
$query4="SELECT * FROM album WHERE view=1 ORDER BY AID DESC";
$kalla4=mysql_query($query4);
while($row4 = mysql_fetch_assoc($kalla4)) {
echo "
$('.open_fancybox".$row4['AID']."').click(function() {
$.fancybox.open([
";
$query3="SELECT * FROM album_photos WHERE fk_AID='".$row4['AID']."' ORDER BY PID;";
$kalla3=mysql_query($query3);
$first=1;
while($row3 = mysql_fetch_assoc($kalla3)){
if ($first==1) {
echo "
{
href : '".$row3['url']."',
title : '".$row3['description']."'
";
$first=0;
} else {
echo "
},
{
href : '".$row3['url']."',
title : '".$row3['description']."'
";
}
}
?>
}
], {
scrolling : 'no',
openEffect: 'elastic',
closeEffect: 'elastic',
nextEffect: 'fade',
prevEffect: 'fade',
mouseWheel: true,
autoPlay: false,
closeBtn: false,
openSpeed: 500,
nextSpeed: 500,
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
});
return false;
});
<?}?>
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('img.aa').hover(
function() {
$(this).stop().animate({"opacity": "0"}, "300");
},
function() {
$(this).stop().animate({"opacity": "1"}, "300");
});
});
</script>
Code to change album (seems to work as intended):
Code:
$query="SELECT * FROM album WHERE view=1 ORDER BY AID DESC";
$kalla=mysql_query($query);
$i=0;?>
<script type="text/javascript" language="javascript">
var descriptions = new Array()
var coverimages = new Array()
var images = new Array()
var AID = new Array()
<?
while($row = mysql_fetch_assoc($kalla)){
if ($row['view']==1){
$q = mysql_query("SELECT * FROM album_photos WHERE fk_AID = '".$row['AID']."' ORDER BY fk_AID");
while ($p = mysql_fetch_assoc($q)){
if ($p['cover']==1){
echo 'descriptions['.$i.'] = "'.$p['description'].'";';
echo 'coverimages['.$i.'] = "'.$p['coverurl'].'";';
echo 'images['.$i.'] = "'.$p['url'].'";';
echo 'AID['.$i.'] = "'.$p['fk_AID'].'";';
$i++;
}
}
}
}
$i--;
echo '
var previous=0;
var next=0;
var current=0;
var min=0;
var max='.$i.';
var current=max;'; ?>
function previousImage() {
if (previous==min)
{
previous=max;
}
else
{
previous--;
}
if (next==min)
{
next=max;
}
else
{
next--;
}
$("#cover").fadeOut(function() {
//$(this).load(function() { $(this).fadeIn(); }); //<-- alternativt
document.getElementById("cover").src=coverimages[previous];
document.getElementById("coverlink").title=descriptions[previous];
document.getElementById("coverlink").href=images[previous];
document.getElementById("coverlink").rel=AID[previous];
$('#coverlink').removeClass('open_fancybox'+AID[current]);
$('#coverlink').addClass('open_fancybox'+AID[previous]);
$(this).fadeIn();
});
if (current==min)
{
current=max;
}
else
{
current--;
}
}
function nextImage() {
if (previous==max)
{
previous=min;
}
else
{
previous++;
}
if (next==max)
{
next=min;
}
else
{
next++;
}
$("#cover").fadeOut(function() {
//$(this).load(function() { $(this).fadeIn(); }); //<-- alternativt
document.getElementById("cover").src=coverimages[next];
document.getElementById("coverlink").title=descriptions[next];
document.getElementById("coverlink").href=images[next];
document.getElementById("coverlink").rel=AID[next];
$('#coverlink').removeClass('open_fancybox'+AID[current]);
$('#coverlink').addClass('open_fancybox'+AID[next]);
$(this).fadeIn();
});
if (current==max)
{
current=min;
}
else
{
current++;
}
}
</script>
Thanks for the help
//Johan
I'm not getting any errors in firebug consol either
the url is jnintensified.com
(pass: tesTar)
Code for opening the album:
