Random-timed image changer and changing them manually

Dev Shed Forums Sponsor:

September 17th, 2012, 11:11 AM

boris90

Registered User

Join Date: Sep 2012

Posts: 1

Time spent in forums: 36 m 12 sec
Reputation 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 & CONSULTING
</p>
<p><b>DOOR Training & 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.

September 23rd, 2012, 01:19 AM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 601

Time spent in forums: 1 Week 1 Day 13 h 27 m 46 sec
Reputation Power: 69

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.

Random-timed image changer and changing them manually

Developer Shed Advertisers and Affiliates