#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    1
    Rep Power
    0

    Random-timed image changer and changing them manually


    I have the site code where I've used the given images for an automatic slideshow. I managed to make a script which generates a random number between 3000 and 8000, but generates only whole thousands (3000, 4000, 5000, 6000, 7000 and 8000). These numbers represent the miliseconds for the function I use, which is setTimeout(). I then use the randomly generated time as a parameter in the setTimeout() function, which, in a given random time, calls the rotate() function which switches between the two images (does the image change).
    Now, my boss told me this is a nicely done thing, except that he couldn't make this to work on his regular website (I think we concluded there was a problem with image names later: his images didn't change at all). Nevertheless, he told me he'll try to fix the implementation, because he saw my code worked on my laptop and didn't on his PC, and to try to make the images change not only by themselves with a random timer, but also when a user clicks on the current image.
    I tried doing this by inserting the onclick attribute in the <a> tag, which did the thing he wanted, but the thing is it doesn't work properly: the image changes, but sometimes one of the images appears for too short, which is like it is being skipped. If I try clicking some more, the images start changing faster and faster, until it's unbearable.

    My guess is that something must be wrong with the random time generator, a problem which occurs whenever I click on the image (call the rotate() function for changing the images).
    What do you suggest?

    Put 3 images (any) named slika-1, slika-2 and slika-3 in the folder index.php_files, which is in the same directory as the index.php.htm file. The file that contains code is the .htm file with name index.php. Don't ask!

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html><head>
      <title>DOOR Training Serbia</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <meta http-equiv="Pragma" content="no-cache">
      <meta name="description" content="DOOR je posvećen unapređenju performansi i efikasnosti svojih klijenata kroz sticanje i usavršavanje veština savremenog poslovanja. Svoju misiju ostvaruje kroz specifične obuke praćene alatima za procenu polaznika pre njenog pohađanja, u toku samog treninga, kao i praćenje napretka nakon njega.">
      <link rel="shortcut icon" href="http://www.door-serbia.net/slike/door.ico">
      <link href="index.php_files/glavni.css" rel="stylesheet" type="text/css">
    <!--[if lte IE 6]>
    
        <link rel="stylesheet" href="../css/iefixes.css">    
    
    <script src="js/nofocus.js" type="text/javascript"></script>
    
      <![endif]--> 
    <style type="text/css">
    /* rotator in-page placement */
        div.rotator {
    	position:relative;
    	height:345px;
    	margin-left: 15px;
    	display: none;
    }
    /* rotator css */
    	div.rotator ul li {
    	float:left;
    	position:absolute;
    	list-style: none;
    }
    /* rotator image style */	
    	div.rotator ul li img {
    	border:1px solid #ccc;
    	background: #FFF;
    }
        div.rotator ul li.show {
    	z-index:500
    }
    </style>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    
    <!-- By Dylan Wagstaff, http://www.alohatechsupport.net -->
    <script type="text/javascript">
    
            var timeMin = 3000; // 3 seconds
            var timeMax = 8000; // 8 seconds
    
    		$(function(){
    		rotate();
    		});
    		
    	//Get a random number between 1-6 (1000-6000) and add 2000, to get one between 3000-8000
    	var random = Math.ceil(Math.random() * 6) * 1000 + 2000;
    
    function theRotator() {
    
    	//Set the opacity of all images to 0
    	$('div.rotator ul li').css({opacity: 0.0});
    	
    	//Get the first image and display it (gets set to full opacity)
    	$('div.rotator ul li:first').css({opacity: 1.0});
    		
    	//Call the rotator function to run the slideshow, random = call the rotate() function between 3-8 s
    	//setInterval('rotate()', random);
    	
    } 
    
        
    function rotate() {	
    	//Get the first image
    	var current = ($('div.rotator ul li.show')?  $('div.rotator ul li.show') : $('div.rotator ul li:first'));
    
        if ( current.length == 0 ) current = $('div.rotator ul li:first');
    
    	//Get next image, when it reaches the end, rotate it back to the first image
    	var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator ul li:first') :current.next()) : $('div.rotator ul li:first'));
    	
    	//Un-comment the 3 lines below to get the images in random order
    	
    	//var sibs = current.siblings();
        //var rndNum = Math.floor(Math.random() * sibs.length );
        //var next = $( sibs[ rndNum ] );
    			
    
    	//Set the fade in effect for the next image, the show class has higher z-index
    	next.css({opacity: 0.0})
    	.addClass('show')
    	.animate({opacity: 1.0}, 1000);
    
    	//Hide the current image
    	current.animate({opacity: 0.0}, 1000)
    	.removeClass('show');
    	
    	var time = getRandom(timeMin, timeMax);
    	setTimeout("rotate()", time);
    
    };
    
        function getRandom(min, max) {
            var r = Math.floor((Math.random()*(max-min))+min);
            //$("#test").append("<p>getRandom(" + min + ", " + max +") = " + r + "</p>");
            return r;
            }
    
    
    $(document).ready(function() {		
    	//Load the slideshow
    	theRotator();
    	$('div.rotator').fadeIn(1000);
        $('div.rotator ul li').fadeIn(1000); // tweak for IE
    });
    </script>
    
    </head>
    <body id="home">
    
    <div id="container">
    <div id="wrapper_content"> 
    
    <!-- HEADER -->
    <div id="header"><a href="http://www.door-serbia.net/srpski/index.php" title="DOOR Training Serbia"><img src="index.php_files/DOOR_logo_Serbia.jpg" alt="DOOR Training Serbia" id="logo" height="80" width="176"></a><table id="citat" style="position: relative; top: 0px; float: right; margin: 12px 16px 0px 0px;" border="0" height="80" width="auto"><tbody><tr><td style="text-align: left; vertical-align: bottom; font-size: 11.5px;">Ako želite da sagradite brod, ne terajte ljude da skupljaju građu i alat,<br>ne zapovedajte im šta da rade, već ih naučite da žude za beskrajnim<br>daljinama iza horizonta.</td></tr><tr><td style="text-align: right; font-size: 11px;">Antoine de Saint-Exupéry (1900-1944)</td></tr></tbody></table>
    </div>
    
    <!-- FIN HEADER -->
    <!-- MENUS -->
    <div id="menus">
    <ul>
    	<li><a href="http://www.door-serbia.net/srpski/index.php" class="current"><b>Početna</b></a></li>
    	<li><a href="http://www.door-serbia.net/srpski/a100_about.php"><b>O nama</b></a>
    		<ul>
    			<li><a href="http://www.door-serbia.net/srpski/a101_history.html">Istorijat</a></li>
    			<li><a href="http://www.door-serbia.net/srpski/a102_principles.html">Principi poslovanja</a></li>
    			<li><a href="http://www.door-serbia.net/srpski/a103_team.html">Naš tim</a></li>
    			<li><a href="http://www.door-serbia.net/srpski/a104_network.html">DOOR mreža</a></li>
    		</ul>
    	</li>
    	<li><a href="http://www.door-serbia.net/srpski/a200_programs.php"><b>Programi</b></a>
    		<ul>
    			<li><a href="http://www.door-serbia.net/srpski/a201_integrative.html">Integrativna rešenja</a></li>
    			<li><a href="http://www.door-serbia.net/srpski/a202_sector.html">Sektorski pristup</a></li>
    			<li><a href="http://www.door-serbia.net/srpski/a203_leader.html">Liderski programi</a></li>
    			<li><a href="http://www.door-serbia.net/srpski/a204_universal.html">Univerzalni treninzi</a></li>
    			<li><a href="http://www.door-serbia.net/srpski/a205_special.html">Specijalni programi</a></li>
    			<li><a href="http://www.door-serbia.net/srpski/a206_global.html">Globalno partnerstvo</a></li>
    			<li><a href="http://www.door-serbia.net/srpski/a207_catalogue.html">Katalog treninga</a></li>
    		</ul>
    	</li>
    	<li><a href="http://www.door-serbia.net/srpski/a300_wiifm.php"><b>Timbilding</b></a>
    		<ul>
    			<li><a href="http://www.door-serbia.net/srpski/a301_philosophy.html">Filozofija</a></li>
    			<li><a href="http://www.door-serbia.net/srpski/a302_locations.php">Lokacije</a></li>
    			<!--<li><a href="a303_galery.html">Galerija</a></li>-->
    		</ul>
    	</li>
    	<!--<li><a href="koucing.html"><b>Koučing</b></a></li>-->
    	<li><a href="http://www.door-serbia.net/srpski/a400_references.php"><b>Reference</b></a>
    		<ul>
    			<li><a href="http://www.door-serbia.net/srpski/a401_international.html">Internacionalne</a></li>
    			<li><a href="http://www.door-serbia.net/srpski/a402_region.html">Regionalne</a></li>
    			<li><a href="http://www.door-serbia.net/srpski/a403_industry.html">Granske</a></li>
    		</ul>
    	</li>
    	<li><a href="http://www.door-serbia.net/srpski/a500_download.php"><b>Preuzimanja</b></a></li>
    	<li><a href="http://www.door-serbia.net/srpski/a600_contact.php"><b>Kontakt</b></a></li>
    	<li><a href="http://www.door-serbia.net/srpski/a700_map.php"><b>Mapa sajta</b></a></li>
    </ul>
    </div>
    
    <!-- LEFTCOL -->
    <div id="leftcol">
    	<div class="Block">
            <div class="Block-tl"></div>
            <div class="Block-tr"></div>
            <div class="Block-bl"></div>
            <div class="Block-br"></div>
            <div class="Block-tc"></div>
            <div class="Block-bc"></div>
            <div class="Block-cl"></div>
            <div class="Block-cr"></div>
            <div class="Block-cc"></div>
            <div class="Block-body">
    			<div class="BlockHeader">
    				<div class="l"></div>
    				<div class="r"></div>
    				<div class="header-tag-icon">
    					<div class="t">Navigacija</div>
    				</div>
    			</div>
    			<div id="navigation">
    				<ul>
    					<li><a href="http://www.door-serbia.net/srpski/index.php" class="current">Početna</a></li>
    					<li><a href="http://www.door-serbia.net/srpski/a100_about.php">O nama</a>
    						<ul>
    							<li><a href="http://www.door-serbia.net/srpski/a101_history.html">Istorijat</a></li>
    							<li><a href="http://www.door-serbia.net/srpski/a102_principles.html">Principi poslovanja</a></li>
    							<li><a href="http://www.door-serbia.net/srpski/a103_team.html">Naš tim</a></li>
    							<li><a href="http://www.door-serbia.net/srpski/a104_network.html">DOOR mreža</a></li>
    						</ul>
    					</li>
    					<li><a href="http://www.door-serbia.net/srpski/a200_programs.php">Programi</a>
    						<ul>
    							<li><a href="http://www.door-serbia.net/srpski/a201_integrative.html">Integrativna rešenja</a></li>
    							<li><a href="http://www.door-serbia.net/srpski/a202_sector.html">Sektorski pristup</a></li>
    							<li><a href="http://www.door-serbia.net/srpski/a203_leader.html">Liderski programi</a></li>
    							<li><a href="http://www.door-serbia.net/srpski/a204_universal.html">Univerzalni treninzi</a></li>
    							<li><a href="http://www.door-serbia.net/srpski/a205_special.html">Specijalni programi</a></li>
    							<li><a href="http://www.door-serbia.net/srpski/a206_global.html">Globalno partnerstvo</a></li>
    							<li><a href="http://www.door-serbia.net/srpski/a207_catalogue.html">Katalog treninga</a></li>
    						</ul>
    					</li>
    					<li><a href="http://www.door-serbia.net/srpski/a300_wiifm.php">Timbilding</a>
    						<ul>
    							<li><a href="http://www.door-serbia.net/srpski/a301_philosophy.html">Filozofija</a></li>
    							<li><a href="http://www.door-serbia.net/srpski/a302_locations.php">Lokacije</a></li>
    							<!--<li><a href="a303_galery.html">Galerija</a></li>-->
    						</ul>
    					</li>
    					<!--<li><a href="koucing.html">Koučing</a></li>-->
    					<li><a href="http://www.door-serbia.net/srpski/a400_references.php">Reference</a>
    						<ul>
    							<li><a href="http://www.door-serbia.net/srpski/a401_international.html">Internacionalne</a></li>
    							<li><a href="http://www.door-serbia.net/srpski/a402_region.html">Regionalne</a></li>
    							<li><a href="http://www.door-serbia.net/srpski/a403_industry.html">Granske</a></li>
    						</ul>
    					</li>
    					<li><a href="http://www.door-serbia.net/srpski/a500_download.php">Preuzimanja</a></li>
    					<li><a href="http://www.door-serbia.net/srpski/a600_contact.php">Kontakt</a></li>
    					<li><a href="http://www.door-serbia.net/srpski/a700_map.php">Mapa sajta</a></li>
    				</ul>
    			</div>
    			<div class="BlockContent-body">
    				<form method="get" action="search.php" class="zoom_searchform"><input name="zoom_sort" value="0" type="hidden"><input name="zoom_query" style="width: 152px;" value="Pretraga" id="zoom_searchbox" class="zoom_searchbox" type="text"></form>
    			</div>
            </div>
        </div>
    </div>
    <!-- FIN LEFTCOL -->
    
    <!-- CENTRE -->
    <div class="rotator" id="center">
    <!-- <p><img src="../slike/000_intro.gif" alt="photo" id="pix" width="100%"></p> -->
    <table style="text-align: center;" border="1" cellpadding="3" cellspacing="1" width="536px">
    	<tbody><tr>
    		<td style="text-align: center; vertical-align: top; padding: 0px; background-color: rgb(204, 204, 255);" width="35px">
    		<a href="http://www.door-serbia.net/srpski/index.php?parametar=1">
    		<img src="index.php_files/a10.jpg" alt="photo" id="pix1" style="border-width: 0px; vertical-align: top;" width="100%"></a></td>
    		<td style="text-align: center; vertical-align: top; padding: 0px; background-color: rgb(204, 204, 255);" width="35px">
    		<a href="http://www.door-serbia.net/srpski/index.php?parametar=3">
    		<img src="index.php_files/a30.jpg" alt="photo" id="pix2" style="border-width: 0px; vertical-align: top;" width="100%"></a></td>
    		<td style="text-align: center; vertical-align: top; background-color: rgb(204, 204, 255);" width="456px">
    		<ul>
    			<li class="show"><a href="#" onclick="rotate()"><img src="index.php_files/slika-1.jpg" alt="photo" id="pix3" style="border-width: 0px; vertical-align: top;" width="100%"></a></li>
    			<	i><a href="#" onclick="rotate()"><img src="index.php_files/slika-2.jpg" alt="photo" id="pix3" style="border-width: 0px; vertical-align: top;" width="100%"></a></li>
    			<li><a href="#" onclick="rotate()"><img src="index.php_files/slika-3.jpg" alt="photo" id="pix3" style="border-width: 0px; vertical-align: top;" width="100%"></a></li>
    		</ul>
    		</td>
    	</tr>
    </tbody></table>
    </div>
    
    <div id="center">
    <br>
    <p style="font: bold 18px/24px Verdana, Tahoma, Arial, Helvetica, sans-serif; padding-top: 6px;">
    DOOR TRAINING &amp; CONSULTING
    </p>
    <p><b>DOOR Training &amp; Consulting</b> je kompanija posvećena unapređenju performansi
    i efikasnosti svojih klijenata kroz sticanje i usavršavanje veština i
    znanja potrebnih za savremeno poslovanje. Svoju misiju ostvaruje kroz
    praktične programe dopunjavane alatima za procenu polaznika i pre, i u
    toku pohađanja obuke, kao i praćenje napretka nakon završenih treninga.</p>
    <p>Naši <a href="http://www.door-serbia.net/srpski/a400_references.php">klijenti</a> su pojedinci, timovi,
    kompanije, državna ministarstva...</p>
    <p><a href="http://www.door-serbia.net/srpski/a104_team.html">Naš tim</a> čine profesionalci koji imaju izraženu
    samoinicijativu, samostalnost i strast ka samorazvoju i razvoju svojih
    klijenata. Svaki trener u DOOR-u mora biti i jeste sertifikovan za
    držanje svakog pojedinog treninga. Proces sertifikacije je vrlo
    zahtevan i standardizovan za sve članice <a href="http://www.door-serbia.net/srpski/a105_network.html">DOOR
    mreže</a>.</p>
    <p><a href="http://www.door-serbia.net/srpski/a201_programs.html">DOOR treninzi</a> su međunarodno priznati, i
    za svaki završeni trening polaznici mogu dobiti internacionalni sertifikat.</p>
    <p style="font: bold 18px/24px Verdana, Tahoma, Arial, Helvetica, sans-serif; padding-top: 8px;">
    <b>Zašto DOOR?</b>
    </p>
    <p><b>FOKUS NA KOMPETENCIJAMA</b></p>
    <p>Svi trening-programi su usmereni ka sticanju praktičnih
    kompetencija, koje se zasnivaju na konkretnim veštinama, znanjima i
    iskustvima.</p>
    <p>Kada god je to moguće, budući polaznici se, po našoj preporuci,  anketiraju pre
    konačnog definisanja programa treninga. Po potrebi, razvijamo alate procene kojima
    utvrđujemo razliku između trenutne i željene situacije na nivou
    kompetencija konkretnih zaposlenih, i to nam je glavna vodilja prilikom
    krojenja treninga.</p>
    <br>
    <table>
      <tbody>
        <tr>
          <td width="65%">
          <p><b>TRENINZI KROJENI U SKLADU SA CILJEVIMA OBUKE</b></p>
          <p>Nakon utvrđivanja potreba i očekivanja polaznika i njihovih
    pretpostavljenih, kao i situacione analize, definišemo program obuke.
    Proces pripreme, realizacije i evaluacije programa je maksimalno
    koordinisan sa klijentima. Nudimo specifične treninge koji su skrojeni
    prema željama klijenta i unapred definisanim ciljevima. Vrlo retko
    kompanijama isporučujemo već gotove, kataloške trening programe, i to
    isključivo na njihov zahtev, onda kada je to opravdano.</p>
          </td>
          <td width="35%">
          <img src="index.php_files/000_fists.jpg" alt="photo" id="pix" align="left" height="210px"></td>
        </tr>
      </tbody>
    </table>
    <br>
    <p><b>MERLJIVA EFEKTIVNOST SPROVEDENE OBUKE</b></p>
    <p>Naša usluga se obično ne završava samim održavanjem obuke. Moguće je
    meriti efektivnost održanih treninga, i na zahtev klijenta, uz pomoć
    zajednički definisanih alata, procenjujemo rezultate obuke koje
    zaposleni pokazuju u praksi.</p>
    <br>
    <p><b>DOOR AKADEMIJA</b></p>
    <p>Naši treneri su eksperti u svojim oblastima i konstantno prolaze
    kroz sertifikacionu obuku organizovanu u okvirima DOOR akademije.
    Zahvaljujući tome naši klijenti mogu računati na standardizovani,
    visoki nivo kvaliteta u svim zemljama gde poslujemo.</p>
    <br>
    <p><b>KORPORATIVNI UNIVERZITET</b></p>
    <p>Multinacionalnim kompanijama i kompanijama sa velikim brojem
    zaposlenih pružamo uslugu formiranja korporativnog univerziteta, u
    okvirima koga klijent, uz pomoć DOOR metodologije i trenera, može
    realizovati standardizovanu obuku unutar mreže svojih zaposlenih. Obuka
    na korporativnom univerzitetu može obuhvatati i tehničke i netehničke
    programe.</p>
    <br>
    </div>
    <!-- FIN CENTRE -->
    <!-- RIGHTCOL -->
    <div id="rightcol">
        <div class="Block">
            <div class="Block-tl"></div>
            <div class="Block-tr"></div>
            <div class="Block-bl"></div>
            <div class="Block-br"></div>
            <div class="Block-tc"></div>
            <div class="Block-bc"></div>
            <div class="Block-cl"></div>
            <div class="Block-cr"></div>
            <div class="Block-cc"></div>
            <div class="Block-body">
                <div class="BlockHeader">
                    <div class="l"></div>
                    <div class="r"></div>
                    <div class="header-tag-icon">
    					<div class="t">Preporuka</div>
    				</div>
                </div>
    			<div class="BlockContent">
                    <div class="BlockContent-body">
    				                <a style="margin-bottom: 6px; padding: 0px;" target="_blank" href="http://www.door-serbia.net/srpski/s6_62.html"><img style="border-style: solid; border-width: 1px; border-color: white;" src="index.php_files/s6_62.jpg" alt="an image" height="112" width="156"></a>
    
                    <a style="margin-bottom: 6px; padding: 0px;" target="_blank" href="http://www.door-serbia.net/srpski/s1_4.html"><img style="border-style: solid; border-width: 1px; border-color: white;" src="index.php_files/s1_4.jpg" alt="an image" height="112" width="156"></a>
                                            
                    <a style="margin-bottom: 6px; padding: 0px;" target="_blank" href="http://www.door-serbia.net/srpski/s5_52.html"><img style="border-style: solid; border-width: 1px; border-color: white;" src="index.php_files/s5_52.jpg" alt="an image" height="112" width="156"></a>
                                            
                    <a style="margin-bottom: 6px; padding: 0px;" target="_blank" href="http://www.door-serbia.net/srpski/s4_46.html"><img style="border-style: solid; border-width: 1px; border-color: white;" src="index.php_files/s4_46.jpg" alt="an image" height="112" width="156"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- FIN RIGHTCOL -->
    
    <!-- FOOTER -->
    <div id="footer">
    <p>© 2011 DOOR Training Serbia · Tel. +381(0)11.3629.148 · Fax +381(0)11.3629.149 · e-mail: <b><a href="mailto:kontakt@door-serbia.net">kontakt@door-serbia.net</a></b><a href="mailto:kontakt@door-serbia.net">
    </a></p><a href="mailto:kontakt@door-serbia.net">
    </a></div><a href="mailto:kontakt@door-serbia.net">
    <!-- FIN FOOTER -->
    </a></div><a href="mailto:kontakt@door-serbia.net">
    </a></div><a href="mailto:kontakt@door-serbia.net">
    
    <!--privremeno u statusu komentara: <script type="text/javascript" src="js/nospam.js"></script> -->
    <script src="index.php_files/ga.js" async="" type="text/javascript"></script><script type="text/javascript">
    
     var _gaq = _gaq || [];
     _gaq.push(['_setAccount', 'UA-8694640-4']); _gaq.push(['_trackPageview']);
    
     (function() {
     var ga = document.createElement('script');
     ga.type = 'text/javascript';
     ga.async = true;
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
     var s = document.getElementsByTagName('script')[0];
     s.parentNode.insertBefore(ga, s);
     })();
    
    </script>
    
    
    </a></body></html>
    Thanks.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,119
    Rep Power
    119
    Sounds to me like you need to use clearTimeout(); when the images is clicked on and then use setTimeout() again; to re-initiate the slideshow; after X amount of seconds pass. I just recently created a sliding image carousel and had to do... just exactly that, because I ran into the same kind of problem.

IMN logo majestic logo threadwatch logo seochat tools logo