SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Oct 2003
    Location
    Haarlem - The Netherlands
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image rotator - Not a standard one!

    Edited on November 7th:
    I use the script by Adios now. If you want to see the original script in action, to compare speed, please go to www.allwelltrade.com/oldindex.html
    ===========================================

    Hi,

    I am looking for an image rotator script, and although I have found many scripts that do so, they do not quite do what I want. And I cannot create one myself. I can tweak scripts a little most of the times, but that's about it. I would be most grateful if somebody could help me with this!

    What I need is this. I am working on a new design for my site www.tiptoptemplates.com. I parked it on www.allwelltrade.com, so you can see it there. As you can see I use an image rotating script, which uses a large number of images and preloads all of them before showing them in fixed order. This causes too much delay and I also don't like the fixed order. What I would want is the same effect, but in the form of script that picks a random image from an array, and shows the image immediately. In the background the next random image must be loaded. So only the next image, not all of them. That way there will be much less delay I presume. Am I correct and if so, can this be done?

    Thank you!
    Last edited by ntg; Nov 7, 2003 at 08:03.
    Regards,
    Jurgen Nijhuis
    Argos Media (Dutch)

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Jurgen,

    I can't actually see the existing script on your page. Can you point us to it and then maybe we can tweak it rather than starting from scratch?


    Andy
    P.S.
    Nice part of the world you're from there.
    I caught Within Temptation live at an outdoor gig in Haarlem a couple of years ago.
    From the English nation to a US location.

  3. #3
    SitePoint Member
    Join Date
    Oct 2003
    Location
    Haarlem - The Netherlands
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by awestmoreland
    Hi Jurgen,

    I can't actually see the existing script on your page. Can you point us to it and then maybe we can tweak it rather than starting from scratch?


    Andy
    P.S.
    Nice part of the world you're from there.
    I caught Within Temptation live at an outdoor gig in Haarlem a couple of years ago.
    Hi Andy,

    you're right about Haarlem, it's a very nice place to live. Great you've been here!

    About the script: when I do View Source of www.allwelltrade.com/index.html it's there for all to see :-)
    I'm not sure why you can't see it, but if you still cannot see it, please let me know and I'll post the script...

    Thanks again!
    Regards,
    Jurgen Nijhuis
    Argos Media (Dutch)

  4. #4
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm. Harlem isn't all that nice. Only one 'a' in it, too.

    Anyhow, take a look at this. Modfied it without testing so, you got what you paid for . Looks OK, though.
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>TipTop Templates</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <base href="http://www.allwelltrade.com/">
    <link href="stylesheet.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" language="JavaScript1.2" src="/menu/stm31.js"></script>
    <script type="text/javascript" language="javascript">
    <!--
    
    //----------------- __RAND_O_RAMA_ROTATOR__ ------------------->
    //------------------- random image rotator -------------------->
    
    /* 
     *  name all images the same - whatever name you like - except:
     *  every image file must have number (sequential, starting with '1') in name 
     *  e.g. 'images/myPic1.gif', 'images/myPic2.gif', 'images/myPic3.gif' (or: 'images/3.gif')
     *  specify 'generic_filepath' below, replacing number with '@'
     *  e.g. 'images/myPic@.gif'
     */
    
    var generic_filepath = 'dumps/dump@.jpg';
    var num_images = 18; //number of images
    var rand_o_speed = 10; //display frequency (in seconds)
    var rand_o_fade = 4; //crossfade duration (in seconds)
    
    //------------------------------------------------------------->
    
    var rand_o_timer = null;
    var preloadObj = new Image();
    
    function rand_o_rama() //call onload
    {
    	var idx_array, idx_str, first_idx, curr_image, isIE = (window.createPopup) ? 1 : 0;
    	if (!/__RAND_O_RAMA_ROTATOR__/.test(self.name))
    	{
    		var ind1, ind2, temp, tempLength = num_images - 1, i = 0;
    		idx_array = new Array(tempLength);
    		for (i; i < tempLength; ++i)
    			idx_array[i] = i + 2;
    		for (i = 0; i < num_images; ++i)
    		{
    			ind1 = Math.floor(Math.random() * tempLength);
    			ind2 = Math.floor(Math.random() * tempLength);
    			temp = idx_array[ind1];
    			idx_array[ind1] = idx_array[ind2];
    			idx_array[ind2] = temp;
    		}
    		idx_array[idx_array.length] = 1;
    		preloadObj = new Image();
    		preloadObj.src = generic_filepath.replace(/@/, idx_array[0]);
    		self.name = '__RAND_O_RAMA_ROTATOR__' + idx_array.join(',');
    		rand_o_timer = setTimeout('rand_o_rama()', rand_o_speed * 1000);
    		return;
    	}
    
    	idx_str = self.name.split('__RAND_O_RAMA_ROTATOR__')[1];
    	idx_array = idx_str.split(',');
    	first_idx = idx_array.splice(0,1);
    	curr_image = generic_filepath.replace(/@/, first_idx);
    	idx_array[idx_array.length] = first_idx;
    	idx_str = idx_array.join(',');
    	self.name = '__RAND_O_RAMA_ROTATOR__' + idx_str;
    	if (preloadObj.complete)
    	{
    		window.status = 'current image: ' + curr_image + '  |||  next image: ' + generic_filepath.replace(/@/, idx_array[0]); //demo only
    		if (isIE)
    		{
    			document.images.rand_o_box.style.filter = 'blendTrans(duration=2)';
    			document.images.rand_o_box.style.filter = 'blendTrans(duration='+rand_o_fade+')';
    			document.images.rand_o_box.filters.blendTrans.Apply();
    		}
    		document.images.rand_o_box.src = curr_image;
    		if (isIE) 
    			document.images.rand_o_box.filters.blendTrans.Play();
    	}
    	preloadObj = new Image();
    	preloadObj.src = generic_filepath.replace(/@/, idx_array[0]);
    	rand_o_timer = setTimeout('rand_o_rama()', rand_o_speed * 1000);
    }
    
    //------------------------------------------------------------->
    
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#" )!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    //-->
    </script>
    </head>
    
    <body onload="rand_o_rama();st_onload();MM_preloadImages('menu/sepline_h.gif','menu/reddot.gif','menu/blank.gif','menu/arrow_r.gif')" bgcolor="#000000">
    <table width="781" border="0" align="center" cellpadding="0" cellspacing="0" class="Frame">
      <!--DWLayoutTable-->
      <tr>
        <td width="779" height="75" valign="top" bgcolor="#FFFFFF"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="BlockTop">
            <!--DWLayoutTable-->
            <tr>
              <td width="383" height="74" valign="top"><p><img src="images/logo.gif" width="281" height="73"></p>
              </td>
              <td width="396" valign="top"><div align="right" class="menu"><strong><span class="menu"><br>
                      <img src="menu/reddot_onwhite.gif" width="10" height="10"><a href="index.html">&nbsp;home</a><img src="images/spacer.gif" width="10" height="10">
    <img src="menu/reddot_onwhite.gif" width="10" height="10"><a href="sitemap.html">&nbsp;site
                  map</a></span><img src="images/spacer.gif" width="10" height="10"></strong></div>
              </td>
            </tr>
            <!--DWLayoutTable-->
          </table>
        </td>
      </tr>
      <tr>
        <td height="317" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
            <!--DWLayoutTable-->
            <tr>
              <td width="314" rowspan="3" valign="top"><table width="314" border=0 cellpadding=0 cellspacing=0>
            <!--DWLayoutTable-->
            <tr>
             <td width=314 height=316 valign="top"> <img src=dumps/dump1.jpg name=rand_o_box width=314 height=316></td>
            </tr>
          </table></td>
              <td width="465" height="33" valign="top" class="BlockMiddle_Row1"><font color="#FF9900" size="4" face="Verdana, Arial, Helvetica, sans-serif"><strong>
                <script language="JavaScript1.2" src="menu/menu.js" type="text/JavaScript1.2"></script>
              </strong></font></td>
              <td width="1"></td>
            </tr>
            <tr>
              <td height="33" valign="top" class="BlockMiddle_Row2"><font color="#FF9900" size="4" face="Verdana, Arial, Helvetica, sans-serif"><strong>the
                    easy way of webdesign</strong></font></td>
              <td></td>
            </tr>
            <tr>
              <td rowspan="2" valign="top" class="BlockMiddle_Row3_Left"><p><strong>TipTop Templates works together
                    with six major web templates suppliers. As an official reseller
                    of these partners we offer the exact same templates and designs
                    you will find on their own sites.</strong></p>
                <p align="left">Now you can browse, search, and download all web
                  templates and designs conveniently from one site! Of course this
                  service is completely free.<br>
                      <br>
                      <strong>What is a template?</strong><br>
      A template is a pre-made web page, or web site. Some templates are just graphical
      designs, but most of them are complete and ready-to-use web pages. They have
      all you need: HTML source code, all graphics, scripts, flash items, fonts and
      temporary content. <strong><a href="#"><br>
      <br>
            </a>More crappy text here<br>
            </strong>A template is a pre-made web thing with a lot of crappy text for $2000. Pay up now, or suffer the consequences.</p>
                <p align="right"><strong><a href="#">Read more...<br>
                      </a></strong></p></td>
              <td height="250"></td>
            </tr>
            <tr>
              <td height="1"></td>
              <td></td>
            </tr>
        </table>
        </td>
      </tr>
      <tr>
        <td height="26" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="BlockBottom">
            <!--DWLayoutTable-->
            <tr>
              <td width="779" height="25" class="text"><div align="left"><strong><span class="menu"><img src="images/spacer.gif" width="5" height="10">
    <img src="images/spacer.gif" width="5" height="10"></span></strong>&copy; 2003
                    TipTop Templates / New Trade Group</font><strong><span class="menu"><img src="images/spacer.gif" width="60" height="10"></span></strong>
    <a href="index.html">home</a><strong><span class="menu"><img src="images/spacer.gif" width="5" height="10"></span></strong>|<strong><span class="menu">
    <img src="images/spacer.gif" width="5" height="10"></span></strong><a href="templates.html">templates</a>
    <strong><span class="menu"><img src="images/spacer.gif" width="5" height="10"></span></strong>|<strong><span class="menu"><img src="images/spacer.gif" width="5" height="10"></span></strong><a href="#">site
                    creator</a><strong><span class="menu"><img src="images/spacer.gif" width="5" height="10"></span></strong>|<strong><span class="menu"><img src="images/spacer.gif" width="5" height="10"></span></strong>
    <a href="#">hosting</a><strong><span class="menu"><img src="images/spacer.gif" width="5" height="10"></span></strong>|<strong><span class="menu"><img src="images/spacer.gif" width="5" height="10"></span></strong>
    <a href="#">resources</a><strong><span class="menu"><img src="images/spacer.gif" width="5" height="10"></span></strong>|<strong><span class="menu">
    <img src="images/spacer.gif" width="5" height="10"></span></strong><a href="#">links</a><strong><span class="menu"><img src="images/spacer.gif" width="5" height="10"></span></strong></div>
              </td>
        </tr>
        </table>
        </td>
      </tr>
      <tr>
      </tr>
    </table>
    </body>
    </html>
    
    Should randomize the order first load, then preserve it from then on (even if the user goes to another site and returns, so long as the window doesn't get named along the way).
    Let me know if it's buggy and you would care to use it.
    Nice site, btw.

    proost, adios
    Last edited by adios; Nov 5, 2003 at 23:08.
    ::: certified wild guess :::

  5. #5
    SitePoint Member
    Join Date
    Oct 2003
    Location
    Haarlem - The Netherlands
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Adios, this is great!!!!!! It works like a charm. Not buggy at all, and does just what I wanted. Thank you very very much!!! I'm really happy with it!

    And thanks for the compliment as well :-)

    Are you from The Netherlands as well, by the way?
    Regards,
    Jurgen Nijhuis
    Argos Media (Dutch)

  6. #6
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Jurgen....no, but been there, loved it, like Nederlanders.

    [bad joke about Harlem]

    Made a few changes, re-paste it if you like, let me know if it breaks.

    adios
    ::: certified wild guess :::

  7. #7
    SitePoint Member
    Join Date
    Oct 2003
    Location
    Haarlem - The Netherlands
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by adios
    Jurgen....no, but been there, loved it, like Nederlanders.

    [bad joke about Harlem]
    :-)

    Quote Originally Posted by adios
    Made a few changes, re-paste it if you like, let me know if it breaks.
    adios
    Works fine too! Is it better in some way? Which one should I use?
    Regards,
    Jurgen Nijhuis
    Argos Media (Dutch)

  8. #8
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ntg
    Works fine too! Is it better in some way? Which one should I use?
    Either one. Small changes...just thought you'd like to know. The fade (transition) duration wasn't being written into the filter as you had it originally so, fixed it.
    ::: certified wild guess :::

  9. #9
    SitePoint Member
    Join Date
    Oct 2003
    Location
    Haarlem - The Netherlands
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I'll just use the final one then. Thanks again!!
    Regards,
    Jurgen Nijhuis
    Argos Media (Dutch)

  10. #10
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi Jurgen...

    Just so you'll know...I liked this version enough to make it more generic, in case anybody else was interested. Edited the above to incorporate that. Hope you don't mind me using your stuff! (good plug)

    Working on a crossfade equivalent for moz...let me know if you have any interesting ideas for extensions, improvements.

    Don't forget to remove the status line demo!

    adios, adios
    ::: certified wild guess :::

  11. #11
    SitePoint Member
    Join Date
    Oct 2003
    Location
    Haarlem - The Netherlands
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by adios
    hi Jurgen...

    Just so you'll know...I liked this version enough to make it more generic, in case anybody else was interested. Edited the above to incorporate that. Hope you don't mind me using your stuff! (good plug)

    Working on a crossfade equivalent for moz...let me know if you have any interesting ideas for extensions, improvements.

    Don't forget to remove the status line demo!

    adios, adios
    Hi Adios,

    no problem. Great job! I'll let you know if I can come up with anything.

    Cheers,
    Jurgen
    Regards,
    Jurgen Nijhuis
    Argos Media (Dutch)


Bookmarks

Posting Permissions

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