asked on

rotating banner - preload images??

Hi ,, I built a page that rotates an array of banners and animates them a little.
It works fine when it's ofline and im taking the images localy but when i try to take it from the web it doesn't work.
I'm attaching the code. thanks!!!
<html>
<head>
      <title>Untitled</title>

</head>

<body>

</body>
</html>
<script language="JavaScript">
/////////////start the banner identifier and member are for administration use
banner('1','promo');

function banner(identifier,member){
//array of banners taken online----->
var dropimages=new Array()
dropimages[0]="http://banner.clubdicecasino.com/cgi-bin/banner.cgi?id=N&member="+member+"&profile=cdc468x3";
dropimages[1]="http://crbanner.casinopays.com/cgi-bin/banner.cgi?id=N&member="+member+"&profile=car468x3";
dropimages[2]="http://banner.monacogoldcasino.com/cgi-bin/banner.cgi?id=N&member="+member+"&profile=mg468";
dropimages[3]="http://banner.usacasino.com/cgi-bin/banner.cgi?id=N&member="+member+"&profile=usa468";
dropimages[4]="http://banner.newyorkcasino.com/cgi-bin/banner.cgi?id=N&member="+member+"&profile=nyc468";
//array of banners taken from a local folder (WORKS!!)
var imgarr=new Array()
imgarr[0]="images/CDCen46871.gif";
imgarr[1]="images/CDCen46863.gif";
imgarr[2]="images/CDCen46864.gif";
imgarr[3]="images/CDCen46865.gif";
imgarr[4]="images/CDCen46866.gif";
//
var linksarr=new Array()
linksarr[0]="http://banner.clubdicecasino.com/cgi-bin/redir.cgi?id=N&member="+member+"&profile=cdc468x3";
linksarr[1]="http://crbanner.casinopays.com/cgi-bin/redir.cgi?id=N&member="+member+"&profile=car468x3";
linksarr[2]="http://banner.monacogoldcasino.com/cgi-bin/redir.cgi?id=N&member="+member+"&profile=mg468";
linksarr[3]="http://banner.usacasino.com/cgi-bin/redir.cgi?id=N&member="+member+"&profile=usa468";
linksarr[4]="http://banner.newyorkcasino.com/cgi-bin/redir.cgi?id=N&member="+member+"&profile=nyc468";

var preloadedimages=new Array()
for (p=0;p<dropimages.length;p++){
      preloadedimages[p]=new Image()
      preloadedimages[p].src=dropimages[p]
      if(preloadedimages[dropimages.length-1]){
            createscrollingdiv('1','468','60', preloadedimages, linksarr);
            }
      }
}

function createscrollingdiv(identifier,slideshow_width,slideshow_height, arr, links){
      i=0;
      document.write('<div id=main'+identifier+' style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden;>')
            document.write('<div id=bellow'+identifier+' style="position:relative;width:'+slideshow_width+';top:0px;visibility:visible;z-index:0;">')
            document.write('<a href="http://banner.clubdicecasino.com/cgi-bin/redir.cgi?id=N">')
            document.write('<img id=butimg'+identifier+' src="'+arr[i].src+'" ></a></div>');
            document.write('<div name=above id=above'+identifier+' style="position:relative;width:'+slideshow_width+';top:-'+slideshow_height+';visibility:visible;z-index:1">')
            document.write('<a id=abovelink'+identifier+' href=javascript:rotatelink('+identifier+')>');
            document.write('<img id=aboveimg'+identifier+' src="'+arr[i+1].src+'" ></a>')
            document.write('</div>');
      document.write("</div>")
      ////////////////// hidden table containing data/////////////////////
      document.write('<table style="visibility:hidden" >')
      document.write('<tr>')
      for (p=0;p<arr.length;p++){
      document.write('<td id=td"'+p+'idnt'+identifier+'" >'+arr[p].src+'</td>')
      document.write('<td id=tdl"'+p+'idnt'+identifier+'" >'+links[p]+'</td>')
      }
      document.write('</tr>')
      document.write('</table>')
      document.write('<input type="hidden" name="currimg'+identifier+'" id="currimg'+identifier+'" value="1">')
      document.write('<input type="hidden" name="imgheight'+identifier+'" id="imgheight'+identifier+'" value="'+slideshow_height+'">')
      document.write('<input type="hidden" name="arrlength'+identifier+'" id="arrlength'+identifier+'" value="'+arr.length+'">')
      scrolltopimage(identifier);
      ////////////////////////END hidden table ///////////////////////////
}
function scrolltopimage(identifier){//////////////////function that scrolls the top image down to position:0
      positioning=document.getElementById('above'+identifier);
      ////////////////////// CHANGEABLE change the integer to manipulate animation speed /////////////////
      positioning.style.top=parseInt(positioning.style.top)+8;
      ///////////////////////////////////////////////////////////////////////////////////////////////////
      if(parseInt(positioning.style.top)/8>-1){
            positioning.style.top=0;
            setTimeout("changeimage("+identifier+")",3000);
      }
      else if(parseInt(positioning.style.top)<-1){
            setTimeout("scrolltopimage("+identifier+")",50);
      }
}
//////////////function that changes the top image to the next image in the array and the buttom immage to the last one
function changeimage(identifier){
      curr_img=document.getElementById('currimg'+identifier).value;
      if(parseInt(curr_img)+1==parseInt(document.getElementById('arrlength'+identifier).value))
            curr_img=0;
      else
            curr_img++;
      img=document.getElementById('td"'+curr_img+'idnt'+identifier+'"');
      nlink=document.getElementById('tdl"'+curr_img+'idnt'+identifier+'"');
      if(eval(curr_img)>0)
            last_img=eval(curr_img)-1;
      else
            last_img=parseInt(document.getElementById('arrlength'+identifier).value)-1;

      bimg=document.getElementById('td"'+last_img+'idnt'+identifier+'"');
      document.getElementById('above'+identifier).style.top=(-document.getElementById('imgheight'+identifier).value);
      document.getElementById('aboveimg'+identifier).src=img.innerHTML;
      document.getElementById('abovelink'+identifier).src=nlink.innerHTML;
      document.getElementById('butimg'+identifier).src=bimg.innerHTML;
      document.getElementById('currimg'+identifier).value=curr_img;
      uploadedimage=new Image();
      uploadedimage.src=img.innerHTML;
      if(uploadedimage){
      scrolltopimage(identifier);
      }
}
function rotatelink(identifier){////////// function that opens the linked url (onclick)
indx=parseInt(document.getElementById('currimg'+identifier).value)
newindow=document.getElementById('tdl"'+indx+'idnt'+identifier+'"').innerHTML
window.location=newindow;
}
</script>

GwynforWeb

Here is the problem

var preloadedimages=new Array()
for (p=0;p<dropimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=dropimages[p] <--------------the .src must be a GIF, JPEG or BMP
if(preloadedimages[dropimages.length-1]){
createscrollingdiv('1','468','60', preloadedimages, linksarr);
}
}
}

Do this, put these just ater the body tag

<body onload='preloadBans()'>
<IMG stye="display:none><IMG stye="display:none><IMG stye="display:none><IMG stye="display:none>

then have the preload function as

function preloadBans(){
for (i=0;i<5;i++)
document.images[i].src=dropimages[i]
}

GwynforWeb

you need 1 more <IMG stye="display:none>, sorry

GwynforWeb

crap, I am missing a " as well :-(, you want 5 <IMG stye="display:none"> just after the body tag. ie 5 hidden images the banners are loaded into.

5visions

ASKER

thanks but didnt work :-[ ???

5visions

ASKER

If you copy and paste the code you can see the problem there , im only guessing that the problem is in the preloader because it worked nicely offline. but maybe its something else.
anyways ive been trying many things with no success. any help would be appreciated ////// thanks!!

robotman757

this is weird because I copied te code into my frontpage 2003 and it all worked except one of the images did not load. I think about 4 of them did...i just previed the page...it might be that sometimes the images are not loading fast enought, and you may need to find some way to change an image that did not load...so far I can't find the problem, but I am still looking

robotman757

looks like when I do this, the middle image is the problem dropimages[2] ..it keeps trying to load a page and not a picture. The other four pictures load fine even without the stuff after the '?'

5visions

ASKER

the code is woking but the problem is that its not running smoothly , when i run banners located localy it runs good but when i run banners from the web , some jumping accure and it doesnt look good,, also the banner that doesnt load because its a little larger then the other 4 but my thoughts are that a working preloader would fix that.

robotman757

When i tried to load each image, the 3rd one loaded a full web page, but it may have been something i did. What you may need to do is to load the images before running the banner. It may be that you need to put in some kind of timer before you start the banner..just a thought...

5visions

ASKER

Hi all ,, im willing to add more points if someone can explain how to do it.

I need a working version of the code attached, there is a bug there that i couldnt figure out but i need the code or any simmilar code that does the same effect , takes an array of banners and rotates them in a scroller animation-- it has to be independent so i can build a few rotating banners in one page. Thanks!!!!!

robotman757

Your code works fine for me with no problems as long as I change the 3rd image to something else. i just copied the 4th image line into the 3rd one and there are no problems. It looks great too!!

ziffgone

Hi 5visions,

@robotman757 -
"When i tried to load each image, the 3rd one loaded a full web page, but it may have been something i did."

- The web page is set up so if the "member" value in the URL string is not found it will redirect to the web page. If you click here, it will load correctly:

http://banner.monacogoldcasino.com/cgi-bin/banner.cgi?id=N&member=member&profile=mg468

@5visions -

- I'm afraid I have bad news for you, you will absolutely NOT be able to preload these images directly. With the links you have, each site is connecting to a CGI banner rotator itself redirecting to a different banner each time. Because the link is not set directly to an image, it won't preload. If the CGI script were simply spewing out the random image, it would prbably work, but because it redirecting, it will not work to preload using those links.

Don't fear though, I'm working something out for you, so hang tight and I'll get back to you with a solution.

Regards...

ziff..................................................................gone.

robotman757

That's okay..I have a broadband connection and maybe that is why the script was working fine for me once I changed the 3rd picture...I was able to get the 3rd picture to load by plugging in the values correctly, but noticed that the other four did not seem to need any values and just worked correctly. All is well though from what I see...

ziffgone

Hi 5visions,

Alright, having downloaded a bunch of the Casino Banners, I have put together a package for you with a JS file, the Banner Images, and instructions for use. Check out the Example page, and if you like the effect, download the package.

The JS File also contains instructions for setting modifications to your liking. I've used the Affiliate Links you gave in your example above, all you need to do is set your "member" name in the JS File.

http://www.webmastereseller.com/test/rotator/

Hope that helps.

Regards...

5visions

ASKER

Thanks for the code and the explanations,, I understand from the code that you get the images from a local folder:

document.getElementById('bannerDiv').innerHTML='<a href="'+link+'"><img src="banner'+Banner+'_'+curBanner+'.gif" style="width:468px;height:60px;border:none;margin:0px;"></a>';

and the var Banner stands for the path to that folder.

-----what i need to do is to get these banners from the http , I don't have them localy-------------
As for the problem with the preloader i think you are right, it won't preload unless its a .gif , thanks for the help , hope you can make it work for http pathes

ASKER CERTIFIED SOLUTION

ziffgone

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial