Galerija JavaScript

Teva · 24.6.2012, 14:57

Radim seminarski za fax i sad to treba da bude sajt sa nekim silnim čudima, doduše to je nebitno.

I sad hoću da napravim galeriju od 5,6 slika i da ubacim.
Pisao sam skriptu koja radi "slajd" levo desno tako što povećava ili smanjuje širinu elementa (u ovom slučaju diva)

Pa sam kasnije to preradio i ubacio u moju galeriju.
Iz nekog razloga meni te funkcije neće da rade na divovima u toj galeriji.

Kod skripte "levo/desno"

Kod:

<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Untitled Document</title>

<style type='text/css' >

#kontejner{
	width: 50%;
	margin: auto;
	}
#plavi{
	width: 200px;
	height: 200px;
	background-color: blue;
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
	}

#crveni{
	width: 200px;
	height: 200px;
	background-color: red;
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	
	}

</style>

<script type='text/javascript'>

	var i;
	function zatvori_int(){
		i = clearInterval(i);
		}

	function pomeri_levo(){
			var sirina =parseInt(document.getElementById('crveni').style.width);	
			sirina = sirina - 2;
			document.getElementById('crveni').style.width = sirina;
			if(sirina == 0)
				zatvori_int();
		}
	function pomeri_desno(){
			var sirina = parseInt(document.getElementById('crveni').style.width);
			sirina = sirina + 2;
			document.getElementById('crveni').style.width = sirina;
			if(sirina == 200)
				zatvori_int();
	}
	
	function dugme_levo(){
			if(parseInt( document.getElementById('crveni').style.width) == 0)
				return;
			else
					i = setInterval('pomeri_levo()',10);
		}
	function dugme_desno(){
			if(parseInt(document.getElementById('crveni').style.width) == 200)
				return;
			else
					i = setInterval('pomeri_desno()',10);
		}
</script>

</head>

<body>

<div id='kontejner' >
	
    <input type='button' id='levo' value='Levo'  onclick='dugme_levo()'/>
    <input type='button' id='desno' value='Desno' onclick='dugme_desno()' />
    <br />
    <br />
    
  <div id='crveni' style="width: 200px;">
    </div>
    <div id='plavi' style="width: 200px;">
    </div>

</div>

</body>
</html>

KOd galerije

Kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style_slide.css"/>

<script type='text/javascript'>

	var i;
	function zatvori_int(){ //Funkcija za zaustavljanje intervala
		i = clearInterval(i);
		}

	function pomeri_levo(elem){ // funkcija koja smanjuje sirinu diva do 0 (stvara privid kao da se "pomera" ulevo)
	//argument je string koji reprezentuje ime elementa sa kojim treba da radi.
			
			var temp = String(elem);
			//window.alert(temp);
			var sirina = parseInt(document.getElementById(temp).style.width);	
			sirina = sirina - 2;
			//window.alert("entry level");
			
			document.getElementById(temp).style.width = sirina;
			if(sirina == 0)
				zatvori_int();
		}
		
	function pomeri_desno(elem){ // funkcija koja povecava sirinu diva do 440 (stvara privid kao da se "pomera" udesno)
	//argument je string koji reprezentuje ime elementa sa kojim treba da radi.
		
			var sirina = parseInt(document.getElementById(elem).style.width);
			sirina = sirina + 2;
			document.getElementById(elem).style.width = sirina;
			if(sirina == 440)
				zatvori_int();
	}
	
	function sledeci(elem){ // funkcija koja poziva setInterval sa gore pomenutim funkcijama 
	//takodje sadrzi string argument sa imenom elementa
			if(parseInt( document.getElementById(elem).style.width) == 0)
				return;
			else
					i = setInterval('pomeri_levo(elem)',10);
		}
	function prethodni(elem){ // funkcija koja poziva setInterval sa gore pomenutim funkcijama 
		// takodje sadrzi string argument sa imenom elementa
			if(parseInt(document.getElementById(elem).style.width) == 440)
				return;
			else
					i = setInterval('pomeri_desno(elem)',10);
		}
	var tek_el = 1;
	
	function div_sl(){ //funkcija koja predstavlja kontrolu sledeci, poziva gornje funkcije i generise elem koji predstavlja element sa kojim se radi
		if( tek_el < 6 ){
			var elem = "slika"+tek_el;
			//window.alert(elem);
			sledeci(elem);
			tek_el = tek_el + 1;
		}
		else
			window.alert(" NEMA! ");
		}
		
	function div_pr(){ //funkcija koja predstavlja kontrolu prethodni, poziva gornje funkcije i generise elem koji predstavlja element sa kojim se radi
		if(tek_el > 1){
			var elem = "slika"+tek_el;
			prethodni(elem);
			tek_el = tek_el - 1;
			}
		else 
			window.alert("nema");
		}
</script>


</head>

<body>

<div id="kontejner">

	<div id="sl_div" class="kontrole" onclick="div_sl()">
    	<img src="ss_sl.png" alt="nesto" />
    </div>
    
    <div id="slika1" style="width: 440px;"  > <img src="slika1.jpg" alt="s1" /> </div>
    <div id="slika2" style="width: 440px;"  > <img src="slika2.jpg" alt="s2" /> </div>
    <div id="slika3" style="width: 440px;"  > <img src="slika3.jpg" alt="s3" /> </div>
    <div id="slika4" style="width: 440px;"  > <img src="slika4.jpg" alt="s4" /> </div>
    <div id="slika5" style="width: 440px;"  > <img src="slika5.jpg" alt="s5" /> </div>
    <div id="slika6" style="width: 440px;"  > <img src="slika6.jpg" alt="s6" /> </div>
    
    
    <div id="pr_div" class="kontrole" spry:hover="preko" onclick="div_pr()">
    	<img src="ss_pr.png" alt="nesto2"  />
    </div>

</div>
</body>
</html>

Galerija: http://min.us/mrNHqg7C7
Skripta: http://min.us/mQjolJJwA

Hvala unapred

Alatke vezane za temu
Prikaži verziju za štampanje Pošaljite ovu temu na nečiji email
Vrste prikaza
Pređi na linearni mod Pređi na hibridni mod Pregled sa stablom odgovora

Slične teme
tema	temu započeo	forum	Odgovora	Poslednja poruka
Početnički 3D radovi - galerija (WIP, tutorijali)	kinteC	3D radovi	2054	22.10.2021 19:14
JavaScript. da/ne	Game fever	Klijentske aplikacije	1	10.10.2011 0:06
Flashplayer i Javascript, pomoć!	Lazar95	Aplikativni softver	5	13.1.2009 1:19
JavaScript: Kako uzeti sadržaj nekog taga?	urke	Klijentske aplikacije	8	19.8.2008 13:33
javascript - pomoc	nika100	Programiranje	2	17.2.2007 16:25