Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Seeking help with Javascript rotating images

    Hello Javascripters,

    I confess my knowledge of javascript is very basic - I have basic knowledge of HTML and CSS, that's about it.

    Nevertheless, I did find a really easy Javascript snippet of code that works great for randomly rotating a collection of images, like a slideshow.

    I'm very happy how the images rotate, but I'd like to add in a fading transition between images. Basically, everything is just one big table with the HTML on top and Javascript below it:

    Does anyone know an easy way to modify my existing Javascript so that it has a fade effect?

    Here is the URL where you will see right away the rotating images:
    http://www2.pri.org/infosite/network...hemovement.cfm

    Here's the table with HTML and Javascript:

    Code:
    <table width="805" style="line-height: normal; font-size: 24px; font-family: Cambria;border-collapse:collapse; margin: 0;">
    <tr>
      <td width="479" height="268" valign="top" style="line-height: normal; font-size: 24px; font-family: Cambria;">This Black History Monthy, try something different for your listeners! Moments of the movement is an initiative to bring new and diverse voices to the radio. In this package<strong>,</strong> available exclusively to PRI affiliates, you will have available a one-hour long special, along with (28) short segments that each tell the story of the Civil Rights Movement!</td>
      <td width="314" valign="top" style="line-height: normal; font-size: 16px; font-family: Cambria; display: block;">
    <div id="randomdiv1" style="line-height: normal; font-size: 16px; font-family: Cambria; padding-top: 0px; padding-bottom: 5px; padding-left: 5px;">
    <img src="/infosite/programs/_bhm14/esther_terry.jpg">
    </div>
    <div id="randomdiv2" style="line-height: normal; font-size: 16px; font-family: Cambria; padding-top: 0px; padding-bottom: 5px; padding-left: 5px;"><img src="/infosite/programs/_bhm14/robert_hayling.jpg">
    </div>
    <div id="randomdiv3" style="line-height: normal; font-size: 16px; font-family: Cambria; padding-top: 0px; padding-bottom: 5px; padding-left: 5px;"><img src="/infosite/programs/_bhm14/freeman_hrabowski.jpg">
    </div>
    <div id="randomdiv4" style="line-height: normal; font-size: 16px; font-family: Cambria; padding-top: 0px; padding-bottom: 5px; padding-left: 5px;"><img src="/infosite/programs/_bhm14/alfred_moldovan.jpg">
    </div>
    <script type="text/javascript" language="JavaScript"><!--
    TotalRandomDivs = 4;
    var CookieName = 'DivRamdomValueCookie';
    function RandomDisplay() {
    var r = Math.ceil(Math.random() * TotalRandomDivs);
    if(TotalRandomDivs > 1) {
       var ck = 0;
       var cookiebegin = document.cookie.indexOf(CookieName + "=");
       if(cookiebegin > -1) {
          cookiebegin += 1 + CookieName.length;
          cookieend = document.cookie.indexOf(";",cookiebegin);
          if(cookieend < cookiebegin) { cookieend = document.cookie.length; }
          ck = parseInt(document.cookie.substring(cookiebegin,cookieend));
          }
       while(r == ck) { r = Math.ceil(Math.random() * TotalRandomDivs); }
       document.cookie = CookieName + "=" + r;
       }
    for( var i=1; i<=TotalRandomDivs; i++) {
       document.getElementById("randomdiv"+i).style.display="none";
       }
    document.getElementById("randomdiv"+r).style.display="block";
    }
    RandomDisplay();
    setInterval("RandomDisplay()",5200);
    //--></script>
    </td></tr></table>
    Any ideas anyone has would be most appreciated!

    Ben
    Last edited by VIPStephan; 12-04-2013 at 10:16 AM. Reason: corrected code BB tag

  • #2
    Regular Coder Vincent Puglia's Avatar
    Join Date
    Jul 2003
    Location
    where the World once stood
    Posts
    367
    Thanks
    0
    Thanked 13 Times in 13 Posts
    Where the world once stood
    the blades of grass
    cut me still


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •