ss

<html>
<head>
	<title>Foto galerija</title>
</head>
<body>
	<div id="slike" style="display:none;">
		<img src="slike/001.jpg"></img>
		<img src="slike/002.jpg"></img>
		<img src="slike/003.jpg"></img>
		<img src="slike/004.jpg"></img>
		<img src="slike/005.jpg"></img>
		<img src="slike/006.jpg"></img>
		<img src="slike/007.jpg"></img>
		<img src="slike/008.jpg"></img>
		<img src="slike/009.jpg"></img>
		<img src="slike/010.jpg"></img>
		<img src="slike/011.jpg"></img>
		<img src="slike/012.jpg"></img>
		<img src="slike/013.jpg"></img>
		<img src="slike/014.jpg"></img>
	</div>

	<div style="margin:auto; width:800px; height:250px; background-color:#333; padding-top:20px " id="galerija">
		<div id="slikapreview" style="margin:auto; background-color:white; width:760px; height:200px;">

		</div>
		<div id="pointsHolder" style="display:block; margin:auto; background-color:#333; width:760px; height:30px; padding-top: 15px;">

		</div>
		<div id="thumnailsHolder" style="display:none; padding-left: 40px; background-color:#333; height:100px; padding-top: 15px;">

		</div>
	<div>

	<div>
	    <p>Specific�ne funkcije:</p>
		<ul>
		<li><span style="font-weight:bold;">setInterval(function () { ImeFunkcije() }, 3000);</span> - metod poziva funkciju ili izvr�ava izraz u odredenim intervalima ( u milisekundama ) </li>
		<li><span style="font-weight:bold;">setTimeout(function(){ ImeFunkcije() }, 50);</span> - metod poziva funkciju ili izvr�ava izraz posle odredenog broja milisekundi</li>
		</ul>
	</div>

	<script>

		var thumbnails = new Array();
		var currentImage = 0;

		window.onload = function() {
			PostaviGaleriju();
		}

		var myVar=setInterval(function () {myTimer()}, 3000);

		function myTimer() {
			if (currentImage == thumbnails.length) currentImage = 0;
			PrikaziSliku(thumbnails[currentImage++]);
		}

		function PostaviGaleriju()
		{
			 var slike = document.getElementById("slike");
			 var thumnailsHolder = document.getElementById("thumnailsHolder");
			 var pointsHolder = document.getElementById("pointsHolder");

			 slike.style.display = "none";

			 for (var index = 0; index < slike.children.length; index ++)
			 {
					var putanja = slike.children[index].src;
					var id = "sl" + index;
					var pointid = "pt" + index;
					thumnailsHolder.innerHTML += "<img id=" + id + " style='border-color:yellow; border-width:1px; border-style: solid; width:100px; height:30px;' src='" + putanja + "' onclick='PrikaziSliku(\"" + id + "\");' >"
					pointsHolder.innerHTML += "<div id=" + pointid + " style='background-color:gray; margin-right:10px; width:15px; height: 15px; float: left;' ></div>"
					thumbnails.push(id);
			}

			PrikaziSliku(thumbnails[currentImage++]);
		}

		function PrikaziSliku(id)
		{
			var slika = document.getElementById("slikapreview");
			var thumnailsHolder = document.getElementById("thumnailsHolder");

			for (var i = 0 ; i < thumnailsHolder.children.length; i++)
			{
				if (thumnailsHolder.children[i] != null)
				{
					thumnailsHolder.children[i].style.borderColor = "yellow";
					thumnailsHolder.children[i].style.borderWidth = "1px";
				}
			}

			for (var i = 0 ; i < pointsHolder.children.length; i++)
			{
				if (pointsHolder.children[i] != null)
				{
					pointsHolder.children[i].style.backgroundColor = "gray";
				}
			}

			var img = document.getElementById(id);
			img.style.borderColor = "red";
			img.style.borderWidth = "2px";
			var filepath = img.getAttribute("src")

			var point = document.getElementById(id.replace("sl", "pt"));
			point.style.backgroundColor = "silver";

			slika.innerHTML = "<img id='currentImage' style='width:760px; height:200px; opacity:0;' src='" + filepath + " '>"

			fadeIn("currentImage");

		}

		function fadeIn(elementToFade)
        {
            var element = document.getElementById(elementToFade);
			var opacity = parseFloat(element.style.opacity);
			opacity += parseFloat(0.05);
            if(opacity > 1.0) {
                element.style.opacity = 1;
            } else {
				element.style.opacity = opacity;
                setTimeout("fadeIn(\"" + elementToFade + "\")", 50);
            }
        }

	</script>

</body>
</html>