Simppeli galleria JavaScriptillä. Koodi on yksinkertaista, luulen että kaikki ymmärtävät. Jos haluat enemmän kuvia
koodiin, niin lisää vain lisää <option>eita tuonne HTML koodiin.
JavaScript koodi
/* Tallenna tämä koodi tiedostopäätteellä .js samaan kansioon
missä sijaitsee valokuva-albumi.html tiedosto */
function vaihdaKuva()
{
// Viitataan pudotusvalikkoon sen ID:llä
var list = document.getElementById('optionlist');
// Kuva määräytyy pudotusvalikon arvon (indeksi) mukaan
document.mainimage.src = list.options[list.selectedIndex].value;
}
function eteenpain()
{
{
/* Lisätään indeksiä yhdellä, kuvan arvo kasvaa yhdellä.
Huomaa, että pudotusvalikon ID täytyy aina hakea uudelleen */
var list = document.getElementById('optionlist');
list = list.selectedIndex++;
}
// Vaihdetaan kuva pudotusvalikon arvon mukaiseksi
vaihdaKuva();
}
function taaksepain()
{
{
// Sama homma kuin äsken, nyt vain vähenentään arvoa yhdellä
var list = document.getElementById('optionlist');
list = list.selectedIndex--;
}
vaihdaKuva()
}Html koodi
<html> <head> <title>Galleria</title> <!-- Muista linkittää scripti koodiin --> <script src="foto-album.js" type="text/javascript"></script> </head> <body onload="vaihdaKuva()"> <center> <h1>Valokuva-Albumi</h1> <img style="height: 300px;" name="mainimage" border="2"> <form><input value="<<<" onclick="taaksepain()" type="button"> <select id="optionlist" onchange="vaihdaKuva()"> <!-- Vaihda kuvien tiedostonimet sopiviksi --> <option value="Kuva1.jpg">Kuva 1</option> <option value="Kuva2.jpg">Kuva 2</option> <option value="Kuva3.jpg">Kuva 3</option> <option value="Kuva4.jpg">Kuva 4</option> </select> <input value=">>>" onclick="eteenpain()" type="button"> </form> </center> </body> </html>
Korjasin kirjoitusvirheet
Melko sotkuinen toteutus mielestäni.
Aihe on jo aika vanha, joten et voi enää vastata siihen.