1 Replies - 620 Views - Last Post: 23 July 2012 - 05:58 AM

#1 boris90  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 62
  • Joined: 15-November 09

Random image slideshow with random time intervals

Posted 23 July 2012 - 05:54 AM

Hi,

I'm currently working on a site's HTML code and am wondering how can I achieve this: I need to make certain images change, in a form of a slideshow, randomly and with random intervals; this means I will need it to start with a certain image and to go on with showing random images in a specified folder, and all that with random time intervals (somewhere between 3 and 8 seconds).
What I do have currently is a page that changes images with fading effect, follows a certain order, and it does it all with the time interval of 6000 miliseconds, or 6 seconds (setInterval() function).
Below is the code I have now, and at the bottom of the page are the names of the images (slika-1, slika-2 and slika-3). I've tried a few stuff, but to no avail; I didn't want to spoil the code. So what I do need is the slideshow to change images with random time intervals like, for example: [first image] 4 seconds [another image] 7 seconds [another image] 5 seconds etc...
Anyone has ideas?

    <!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">
    //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 randomTime()
    {
    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 randomTime() function randomly between 3-8 s
    setInterval('randomTime()',6000);
    //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');
    };
    $(document).ready(function() {
    //Load the slideshow
    theRotator();
    $('div.rotator').fadeIn(1000);
    $('div.rotator ul li').fadeIn(1000); // tweek 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="http://www.door-serbia.net/srpski/index.php?parametar=12"><img src="index.php_files/slika-1.jpg" alt="photo" id="pix3" style="border-width: 0px; vertical-align: top;" width="100%"></a></li>
    <li><a href="http://www.door-serbia.net/srpski/index.php?parametar=12"><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="http://www.door-serbia.net/srpski/index.php?parametar=12"><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>

This post has been edited by Dormilich: 23 July 2012 - 05:56 AM
Reason for edit:: please use [code] [/code] tags when posting code


Is This A Good Question/Topic? 0
  • +

Replies To: Random image slideshow with random time intervals

#2 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3510
  • View blog
  • Posts: 10,135
  • Joined: 08-June 10

Re: Random image slideshow with random time intervals

Posted 23 July 2012 - 05:58 AM

for a random interval between two images, use setTimeout() and call that recursively (from within the executing function).
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1