[Løst] Javascript captions på slideshow

[Thorvald]

Hei,

 

Driver og lærer meg html, CSS og måtte vist innom Javascript

 

Har lagt inn captions med androidslide.js fil.

Captions viser ikke før man tar neste og så tilbake.....

Noen som har en fiks på dette?

 

Link: http://home.haugnett.no/salvoy/epost/android.html

 

 

JavaScript: 

 

// Javascript document

 

 

var androidbilder=["../images/android1.png", "../images/android2.png", "../images/android3.png", "../images/android4.png", "../images/android5.png", "../images/android6.png", "../images/android7.png",

"../images/android8.png"]

var androidcaption = ["Trykk på e-post", "Velg manuelt oppsett", "Velg Imap konto", "fyll inn e-post og den info som er på bildet", "fyll inn info"]

 

 

 

var imageNumber = 0;

var imageLenght = androidbilder.length -1;

 

 

function changeImage(x) {

imageNumber += x;

//if you`ve reached end of array...Start over

 

if (imageNumber > imageLenght) {

imageNumber = 0;

}

if (imageNumber <0) {

imageNumber = imageLenght;

 

}

 

document.getElementById("androidbilder").src = androidbilder[imageNumber];

document.getElementById("androidcaption").innerHTML = androidcaption[imageNumber];

 

 

return false

 

}

 

------------------------------------------------------------------------------------------

 

 

Css: 

 

#androidbilder {

  float: right;

       margin-right: 40%;

       color: black;

       margin-top: 3%;

       font-size: 25px;

       font-weight: bold;

       width: 400px;

       height: 600px;

 

 

 

}

 

div.androidneste {

 

 float: right;

       margin-right: 46%;

       color: black;

       margin-top: 0%;

       font-size: 25px;

       font-weight: bold;

 

 

}

 

#androidcaption {

 

       position: relative;

       margin-left: 0%;

       color: black;

       margin-top: 3%;

       font-size: 30px;

       font-weight: bold;

 

 

}

 

---------------------------------------------------------------------------------------------

 

HTML:

 

 

 

<div class="androidneste">

 

<a href="#" onclick="changeImage(-1); return false">Tilbake</a>

<a href="#" onclick="changeImage(1); return false;">Neste</a>

 

</div>

 

<img src="../images/android1.png" id="androidbilder" alt="Android" />

<br>

 

<div id="androidcaption">

 

</div>

 

 

 

<script src="../epost/androidslide.js"></script>

</body>

 

Endret 12. januar 2016 av Thorvald

[snippsat]

Du kan teste med og sette samme tekst som første verdien i listen.

<div id="androidcaption">
    Trykk på e-post
</div>

 

[Thorvald]

Takker   Der var den fikset. Bare resten igjen he he