Problem med fotoalbum på hemsida, javascript
Håller på med en hemsida, ska vara som ett fotoalbum och använder mig av jquery och fancybox.
Jag använder javascript i kombination med en massa php-kod och databashantering så koden allt som allt är ganska "messy".
Huvudfunktionen för album är i huvusak uppbyggt av två javascript, ett som sköter bläddrandet mellan albumen och ett annat som har han om fancyboxfunktionen. Problemet är att när man bläddrar till nästa album och öppnar det så öppnas ändå det första albumet.
Det är en separat fancyboxfunktion för varje album som ska verka på element med olika klassnamn. klassnamnet beror av albumID. när jag vill öppna album med ID 11 används alltså klassen open_fancybox11 på fancybox-länken, för album 9 open_fancybox9 osv. När jag kör firebug ser man att klassen byts ut korrekt när man bläddrar mellan albumen men ändå verkar det vara funktionen för album_fancybox11 (det senaste albumet) som anropas.
Jag får heller inga fel i konsolen i firebug.
Hemsidan är jnintensified.com
(Lösen: tesTar)
Kod för att öppna albumet (Den första funktionen $(".fancybox").fancybox är gammal och används inte nu):
<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>
Här är koden för att byta album (verkar fungera korrekt):
$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>
Uppskattar all hjälp
//Johan
