www.webdeveloper.com
Results 1 to 8 of 8

Thread: Image Rotator or Ad Space

  1. #1
    Join Date
    Feb 2010
    Posts
    86

    Image Rotator or Ad Space

    Sorry if this is in the wrong place. Feel free to move it but since this seems to typically involve JavaScript I thought it matched...

    I have a 1,080px by 270px area at the top of our site/blog/forum that i use to randomly display images linked to our blog posts. Not for actual 3rd party ads or anything.

    CURRENTLY I have it divided into 4 equal square divs 270px each. Then each one has a different ad zone assigned. I have purchased an expensive ad server subscription to push the ads randomly to each of the squares each time a page is loaded. I have it setup to never display the same ad at the same time obviously. BUT, the biggest reason I paid an adserver was because every 10 page loads or so I like it to display one large/wide banner across then entire thing. I do this by slicing the one wide image up into 4 via photoshop and then assigning each square of the image into zone 1, zone 2, zone 3, zone 4 and then using a companion restriction so that if one of the images pop up it automatically loads the other 3 matching ones into their zones giving me one wide banner image.

    I think this is really cool but it's very costly each month and a pain in the butt. Is there any easier way to get this same type functionality but without having to pay for an adserver since I'm not really serving 'ads'?

    Thank you for any insight on this

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,687
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    .images {
      position:absolute;z-Index:101;left:100px;top:100px;width:400px;height:300px;border:solid red 1px;
    }
    
    .images IMG {
      width:200px;height:150px;float:left;border-Width:0px;
    }
    
    .images .large {
      position:absolute;z-Index:101;left:0px;top:0px;width:400px;height:300px;border:solid red 1px;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    
     <div class="images" id="tst" >
      <a><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" /></a>
      <a><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" /></a>
      <a><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" /></a>
      <a><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="img" /></a>
     </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcImageRandom={
    
     init:function(o){
      var id=o.ID,ary=o.ImageArray,lary=o.LargeImageArray,f=o.LargeFrequency,days=o.DaysPersistence,days=typeof(days)=='number'?days:-1,obj=document.getElementById(id),imgs=obj.getElementsByTagName('IMG'),lst=this.cookie(id+'='),use,a,img,z0=0;
      f=Math.floor(Math.random()*f);
      use=this.shuffle(f!=0?ary:lary);
      while (use.length>1&&use[0][0].substring(use[0][0].lastIndexOf('/')+1)==lst.substring(lst.lastIndexOf('/')+1)){
       use=this.shuffle(use);
      }
      if (f!=0){
       for (;z0<imgs.length;z0++){
        a=use[z0%use.length];
        imgs[z0].src=a[0];
        if (a[1]){
         imgs[z0].title=a[1];
        }
        if (a[2]){
         imgs[z0].parentNode.href=a[2];
        }
       }
       document.cookie=id+'='+use[0][0]+';'+'expires='+(new Date(new Date().getTime()+days*86400000).toGMTString())+';path=/';
      }
      else {
       img=document.createElement('IMG');
       img.src=use[0][0];
       img.className='large';
       a=document.createElement('A');
       if (a[1]){
        img.title=a[1];
       }
       if (a[2]){
        a.href=a[2];
       }
       a.appendChild(img);
       obj.appendChild(a);
      }
     },
    
     cookie:function(nme){
      var re=new RegExp(nme+'[^;]+','i');
      if (document.cookie.match(re)){
       return document.cookie.match(re)[0].split("=")[1];
      }
      return null;
     },
    
     shuffle:function(ary){
      for (var r,t,z0=0;z0<ary.length;z0++){
       r=Math.floor(Math.random()*ary.length);
       t=ary[z0];
       ary[z0]=ary[r];
       ary[r]=t;
      }
      return ary;
     }
    
    }
    
    zxcImageRandom.init({
     ID:'tst',         // the unique ID name of the carousel parent DIV.                     (string)
     ImageArray:[      // an array of arrays defining the images SRCs, titles and HREFs.     (array)
      // field 0 = the URL of the image.
      // field 1 = the image title.
      // field 2 = the image link href.
      // field 3 = (optional) the parameter to pass to the function.
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','Egypt 5','#'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','Egypt 6','#'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','Egypt 7','#'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg','Egypt 8','#'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg','Egypt 9','#']
     ],
     LargeImageArray:[  // an array of arrays defining the images SRCs, titles and HREFs.    (array)
      ['http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg','Winter Palace','#'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg','Egypt 10','#']
     ],
     LargeFrequency:10, // the frequency to show the large image.                            (number)
     DaysPersistence:1  //(optional) number = the number of days to remember the last image. (number, default = -1 = no persistence)
    
    });
    /*]]>*/
    </script>
    
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Feb 2010
    Posts
    86
    Hey awesome! Thanks so much as this looks like just what I need. Only problem... I tried pasting it onto a fresh blank html page but the images don't seem to rotate. They just stay stationary with the same images on each refresh. Any ideas?

  4. #4
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,687
    please post a link to your page
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #5
    Join Date
    Feb 2010
    Posts
    86
    Here, I threw it on a test domain of mine:

    http://bluevisionweb.com/test.html

    Thanks!

  6. #6
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,687
    see next post
    Last edited by vwphillips; 12-18-2012 at 06:22 AM.
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  7. #7
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,687
    see change in red


    Code:
    var zxcImageRandom={
    
     init:function(o){
      var id=o.ID,ary=o.ImageArray,lary=o.LargeImageArray,f=o.LargeFrequency,days=o.DaysPersistence,days=typeof(days)=='number'?days:-1,obj=document.getElementById(id),imgs=obj.getElementsByTagName('IMG'),lst=this.cookie(id+'='),use,a,img,z0=0;
      f=Math.floor(Math.random()*f);
      use=this.shuffle(f!=0?ary:lary);
      while (lst&&use.length>1&&use[0][0].substring(use[0][0].lastIndexOf('/')+1)==lst.substring(lst.lastIndexOf('/')+1)){
       use=this.shuffle(use);
      }
      if (f!=0){
       for (;z0<imgs.length;z0++){
        a=use[z0%use.length];
        imgs[z0].src=a[0];
        if (a[1]){
         imgs[z0].title=a[1];
        }
        if (a[2]){
         imgs[z0].parentNode.href=a[2];
        }
       }
       document.cookie=id+'='+use[0][0]+';'+'expires='+(new Date(new Date().getTime()+days*86400000).toGMTString())+';path=/';
      }
      else {
       img=document.createElement('IMG');
       img.src=use[0][0];
       img.className='large';
       a=document.createElement('A');
       if (a[1]){
        img.title=a[1];
       }
       if (a[2]){
        a.href=a[2];
       }
       a.appendChild(img);
       obj.appendChild(a);
      }
     },
    
     cookie:function(nme){
      var re=new RegExp(nme+'[^;]+','i');
      if (document.cookie.match(re)){
       return document.cookie.match(re)[0].split("=")[1];
      }
      return null;
     },
    
     shuffle:function(ary){
      for (var r,t,z0=0;z0<ary.length;z0++){
       r=Math.floor(Math.random()*ary.length);
       t=ary[z0];
       ary[z0]=ary[r];
       ary[r]=t;
      }
      return ary;
     }
    
    }
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  8. #8
    Join Date
    Feb 2010
    Posts
    86
    Sweet! Thank you so much! I donate often to operation smile (US at least, not sure it will take my cc info etc for the uk?) but I'd be glad to make an additional contribution for your help! Awesome!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles