Avatar billede alex15 Nybegynder
20. november 2008 - 18:20 Der er 6 kommentarer og
1 løsning

Billedegalleri problemet med at vise: billede x ud af x

Hej Eksperter,

Jeg har følgende kode til at vise billeder:

<script language="JavaScript">

//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('../billeder/biler/4/b_1.jpg','../billeder/biler/4/b_2.jpg','../billeder/biler/4/b_3.jpg','../billeder/biler/4/b_4.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;
}

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();
      }
      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() {
  CurrentSlide = -1;
  Slides[0] = CacheImage(Slides[0]);
  SlideReady = true;
  ShowSlide(1);
}
</script>

<form name="SlideShow">
            <img name="Screen">
<img src="../billeder/formel/formel_pic_left.jpg" onClick="ShowSlide(-1)" />
            <img src="../billeder/formel/formel_pic_right.jpg" onClick="ShowSlide(1)" />
</form>

Som virker helt som den skal, takket være jer. Men nu vil jeg gerne lige have den til at vise f.eks.: "2 of 11".. Min galleri kan ses her:

http://www.alexanderchristensen.dk/test/billede_galleri2/

Har fundet ud af at få den til at skrive hvor mange billeder der er ialt, nu mangler jeg bare at få den til at vise hvilket billede, det er som den viser.

<script type="text/javascript">
    document.write(" of "+ Slides.length);
</script>

Hvordan løser jeg dette problem?

På forhånd skal i have mange tak fordi i gider hjælpe mig med problemet :o)
Avatar billede thesurfer Nybegynder
20. november 2008 - 20:09 #1
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Alexander Christensen's Design</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="css.css">
<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('billeder/pic1.jpg','billeder/pic2.jpg','billeder/pic3.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>
</head>
<body onLoad="StartSlideShow()">

<div class="generelt_boks_1"> 
    <div class="generelt_boks_2">
        <div class="generelt_boks_3">Slideshow <br /><br /></div>

        <div class="generelt_boks_4">

            <div class="boks_1"><img name="Screen"></div>

            <div class="boks_2"></div>

            <div class="boks_3">
                <img style="margin:0px 15px 0px 15px;" src="billeder/left.jpg" onClick="ShowSlide(-1)" />
                <img src="billeder/right.jpg" onClick="ShowSlide(1)" />
                <br><br>
                <div id="divContainer"><span id="spanIndex">0</span> of <span id="spanTotal">0</span></div>
            </div>

        </div>

    </div>

</div>
</body>
</html>
Avatar billede alex15 Nybegynder
21. november 2008 - 11:52 #2
Inponerende. havde jeg aldrig "gættet" mig til.. Der skal man nok kunne lidt Javascript for at kunne lave sådan en kode. Der er dog stadigvæk et enkelt problem. Man kan sætte den til at gå ned til -1? hvordan kan det være?

http://www.alexanderchristensen.dk/test/billede_galleri2/
Avatar billede thesurfer Nybegynder
21. november 2008 - 20:16 #3
Det er fordi linien "dispCurrent.nodeValue = NextSlide;" er placeret lidt for langt nede (uden for IF-blokken)..

Funktionen skal se sådan ud (erstat nuværende med denne eller flyt linien op):

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;
  }
}
Avatar billede thesurfer Nybegynder
21. november 2008 - 20:17 #4
Hmm.. kan lige så godt samle det hele..:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Alexander Christensen's Design</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="css.css">
<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('billeder/pic1.jpg','billeder/pic2.jpg','billeder/pic3.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>
</head>
<body onLoad="StartSlideShow()">

<div class="generelt_boks_1"> 
    <div class="generelt_boks_2">
        <div class="generelt_boks_3">Slideshow <br /><br /></div>

        <div class="generelt_boks_4">

            <div class="boks_1"><img name="Screen"></div>

            <div class="boks_2"></div>

            <div class="boks_3">
                <img style="margin:0px 15px 0px 15px;" src="billeder/left.jpg" onClick="ShowSlide(-1)" />
                <img src="billeder/right.jpg" onClick="ShowSlide(1)" />
                <br><br>
                <div id="divContainer"><span id="spanIndex">0</span> of <span id="spanTotal">0</span></div>
            </div>

        </div>

    </div>

</div>
</body>
</html>
Avatar billede thesurfer Nybegynder
21. november 2008 - 20:17 #5
Svar :-)
Avatar billede thesurfer Nybegynder
21. november 2008 - 20:19 #6
Læg mærke til at du kan nøjes med at flytte div'en med id "divContainer", og så vil "x of y" følge med..

Her kan du bruge CSS eller JavaScript..
Avatar billede alex15 Nybegynder
23. november 2008 - 17:45 #7
Okay ja, kan jeg godt se så. Selv om jeg ikke selv ville have kunnet finde fejlen. Det skal man simpelhen have arbejdet lidt med javascript tror jeg.

men du skal have 1000 tak, nu virker det præcis som jeg gerne vil have det til.

Forsat god weekend :o)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester