Kirjautuminen
Tehtävät
Kilpailu
4. kierros:
7.11. klo 18 – 9.11. klo 23
Tällä pienellä HTML-sivulla voi kätevästi järjestää kuvia raahaamalla.
Sivulle pitää vain lisätä kuvien HTML-tagit, jotka voi generoida tähän malliin (Linuxin komentorivillä):
for i in *.jpg; do echo "<li><img src='$i'>"; done > kuvakoodi.txt
<!DOCTYPE html>
<meta charset="UTF-8">
<script type="text/javascript" src="http://script.aculo.us/prototype.js"></script>
<script type="text/javascript" src="http://script.aculo.us/scriptaculous.js"></script>
<style>
img {
max-width: 128px;
}
li {
list-style-type: none;
display: inline-block;
padding: 4px;
}
</style>
<ul id="list">
<li><img src="kuva1.jpg">
<li><img src="kuva2.jpg">
<li><img src="kuva3.jpg">
<li>TODO: lisää kuvat!
</ul>
<pre id="cmd"></pre>
<script>
function move(src, num) {
return "mv " + src + " " + num + "-" + src.replace(/\//g, '-')
}
Sortable.create("list", {
onChange: function() {
var imgs = $$("#list img")
var s = ""
var numbers = 1 + Math.floor(Math.log10(imgs.length - 1))
for (var i = 0; i < imgs.length; ++i) {
var j = ("000000000" + i).substr(-numbers)
s += move(imgs[i].getAttribute("src"), j) + "\n"
}
$("cmd").textContent = s
}
});
</script>Järjestelyn tuloksena sivun alaosaan ilmaantuu skripti, jolla kuvat saa nimettyä uudestaan. Skriptin voi tallentaa tiedostoon ja suorittaa komentorivillä:
sh skripti.txt
Aihe on jo aika vanha, joten et voi enää vastata siihen.