[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 694
  • Last Modified:

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";
//<!-----array of links to use afor the <a href:</a> ---->
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>


0
5visions
Asked:
5visions
  • 5
  • 5
  • 3
  • +1
1 Solution
 
GwynforWebCommented:
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]
}

0
 
GwynforWebCommented:
you need 1 more  <IMG stye="display:none>, sorry
0
 
GwynforWebCommented:
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.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
5visionsAuthor Commented:
thanks but didnt work :-[ ???
0
 
5visionsAuthor Commented:
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!!
0
 
robotman757Commented:
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
0
 
robotman757Commented:
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 '?'
0
 
5visionsAuthor Commented:
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.
0
 
robotman757Commented:
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...
0
 
5visionsAuthor Commented:
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!!!!!
0
 
robotman757Commented:
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!!
0
 
ziffgoneCommented:
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.
0
 
robotman757Commented:
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...
0
 
ziffgoneCommented:
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...

0
 
5visionsAuthor Commented:
 
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

0
 
ziffgoneCommented:
Don't give up yet 5visions,

I have included all of the banners within the package at the above URL. Simply download, extract and then upload them to your web host and host them locally as I have. Full instructions are included.

Regards...
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 5
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now