Billedegalleri med kommentarer til billede som Facebook
Hej Eksperter,Jeg sidder og skal til at gå igang med en opdatering på mit billedegalleri på min hjemmeside.
Og vil gerne lave det så det fungere på samme måde som på Facebook. Hvor man kan skifte mellem billederne uden at siden skal uploades på ny. Ved skiftet skal kommentarerne også skifte automatisk. Endvidere skal man have mulighed for at kunne linke direkte til det pågældende billede via en url adresse.
Har nu har laver følgende kode:
http://classiccarclub.dk/bil.php?id=1
Her kan man skifte mellem de forskellige billeder uden at siden skal uploades på ny. Og jeg kan også gøre så man kan skrive kommentarer til det enkelte billede, problemet er bare at jeg ikke ved hvordan kan får kommentarerne til at skifte sammen med billederne. Endvidere har man heller ikke mulighed for at linke til et besked billede, i det pågældende album.
Nogle der er friske på at hjælpe mig lidt igennem denne opgave? Eller kan henvise mig til hvor jeg skal starte med at kigge på nettet henne?
Min kode til ovenstående galleri ser således ud:
Visning af billede START:
<img name="Screen">
<img src="billeder/formel/formel_pic_left.jpg" onClick="ShowSlide(-1)" />
<span id="spanIndex">0</span> af <span id="spanTotal">0</span>
<img src="billeder/formel/formel_pic_right.jpg" onClick="ShowSlide(1)" />
<body onLoad="StartSlideShow()">
Visning af billede SLUT:
Javascriptet START:
<script type="text/JavaScript">
var slidesLength = 0;
var dispCurrent = null;
var dispTotal = null;
var imgDisplay = null;
//Preloaded slideshow script- By Jason Moon
//For this script and more
//Visit http://www.dynamicdrive.com
// PUT THE URL'S OF YOUR IMAGES INTO THIS ARRAY...
var Slides = new Array(
<?php
$picinall = 0;
foreach (glob("billeder/biler/".$_GET['id']."/b_*.*") as $filename) {
$piciall++;
}
if($piciall == 1){
foreach (glob("billeder/biler/".$_GET['id']."/b_*.*") as $filename) {
echo "'$filename'";
}
} elseif($piciall > 1){
$b = 0;
foreach (glob("billeder/biler/".$_GET['id']."/b_*.*") as $filename) {
$b++;
if($b != $piciall){
echo "'$filename',";
} else {
echo "'$filename'";
}
}
} else {
echo "'billeder/biler/b_intet.jpg'";
}
?>
);
// DO NOT EDIT BELOW THIS LINE!
function CacheImage(ImageSource) // TURNS THE STRING INTO AN IMAGE OBJECT
{
var ImageObject = new Image();
ImageObject.src = ImageSource;
return ImageObject;
}
var test = CacheImage();
function ShowSlide(Direction)
{
if (SlideReady)
{
NextSlide = CurrentSlide + Direction;
if ((NextSlide >= 0) && (NextSlide < Slides.length))
{
document.images['Screen'].src = Slides[NextSlide].src;
CurrentSlide = NextSlide++;
Message = 'Picture ' + (CurrentSlide+1) + ' of ' + Slides.length;
self.defaultStatus = Message;
if (Direction == 1) CacheNextSlide();
dispCurrent.nodeValue = NextSlide;
}
return true;
}
}
function Download()
{
if (Slides[NextSlide].complete)
{
SlideReady = true;
self.defaultStatus = Message;
} else {
setTimeout("Download()", 100); // CHECKS DOWNLOAD STATUS EVERY 100 MS
}
return true;
}
function CacheNextSlide()
{
if ((NextSlide < Slides.length) && (typeof Slides[NextSlide] == 'string')) // ONLY CACHES THE IMAGES ONCE
{
SlideReady = false;
self.defaultStatus = 'Downloading next picture...';
Slides[NextSlide] = CacheImage(Slides[NextSlide]);
Download();
}
return true;
}
function StartSlideShow()
{
imgDisplay = document.getElementById("Screen");
dispCurrent = document.getElementById("spanIndex").childNodes[0];
dispTotal = document.getElementById("spanTotal").childNodes[0];
CurrentSlide = -1;
Slides[0] = CacheImage(Slides[0]);
SlideReady = true;
ShowSlide(1);
dispCurrent.nodeValue = NextSlide;
dispTotal.nodeValue = Slides.length;
}
</script>
Javascriptet SLUT:
På forhånd tak for hjælpen.
Alex
