Kirjautuminen

Haku

Tehtävät

Keskustelu: Koodit: Bash, HTML, JavaScript: Kuvat järjestykseen raahaamalla

Metabolix [02.09.2016 20:40:10]

#

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

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta