By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,984 Members | 1,454 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,984 IT Pros & Developers. It's quick & easy.

Background image slideshow rogue image

KeredDrahcir
100+
P: 426
I have a script which creates a background image slideshow. I've been trying different scripts which are available on the net and this is almost perfect apart from one bug. I was hoping someone could help me.

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript" language="JavaScript1.2">
  2.  
  3. //Background Image Slideshow-  Dynamic Drive (www.dynamicdrive.com)
  4. //For full source code, 100's more DHTML scripts, and TOS,
  5. //visit http://www.dynamicdrive.com
  6.  
  7. //preload images
  8. var processed=new Array()
  9. for (i=0;i<bgslides.length;i++){
  10. processed[i]=new Image()
  11. processed[i].src=bgslides[i]
  12. }
  13. </script>
  14. <style type="text/css">
  15. <!--
  16.    html, body, #wrapper {
  17.       margin: 0;
  18.       padding: 0;
  19.       border: none;
  20.       text-align: center;
  21.    }
  22.    #wrapper {
  23.       margin: 0 auto;
  24.       text-align: center;
  25.       vertical-align: top;
  26.       width: 550px;
  27.    }
  28.    .image {
  29. /*    float:left;  optional */
  30.    }
  31.    .image .text {
  32.     top:30px; /* in conjunction with left property, decides the text position */
  33.     left:0;
  34.     width:550px; /* optional, though better have one */
  35.     }
  36.     p {
  37.     font-family:Trajan Pro, serif;
  38.     font-size:medium;
  39.     font-weight:bold;
  40.     color:white;
  41.     }
  42.     h1 {
  43.     font-family:Trajan Pro, serif;
  44.     font-weight:bold;
  45.     font-size:x-large;
  46.     color:white;
  47.     text-align:center;
  48.     }
  49.  
  50.  
  51. #bg {
  52.   position:absolute;z-Index:0;left:0px;top:135px;
  53. }
  54.  
  55. #bg IMG{
  56.   position:absolute;left:0px;top:0px;
  57. }
  58.  
  59. --></style>
  60. <div style="height: 395px !important; margin: 0; padding: 0;">
  61.     <div id="bg">
  62.         <img alt="" src="/images/image1.jpg" /> <img alt="" src="/company/images/image2.jpg" /> <a href="page.html"><img alt="" src="/images/image3.jpg" /></a><img alt="" src="/images/image4.jpg" /><img alt="" src="/images/image5.jpg" /></div>
  63. </div>
  64. <script type="text/javascript">
  65. // Animate (11-January-2010)
  66. // by Vic Phillips http://www.vicsjavascripts.org.uk
  67.  
  68. // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
  69. // With the ability to scale the effect time on specified minimum/maximum values
  70. // and with three types of progression 'sin' and 'cos' and liner.
  71.  
  72. // **** Application Notes
  73.  
  74. // **** The HTML Code
  75. //
  76. // when moving an element the inline or class rule style position of the element should be assigned as
  77. // 'position:relative;' or 'position:absolute;'
  78. //
  79. // The element would normally be assigned a unique ID name.
  80. //
  81.  
  82. // **** Initialising the Script.
  83. //
  84. // The script is initialised by assigning an instance of the script to a variable.
  85. // e.g A = new zxcAnimate('left','id1')
  86. // where:
  87. //  A           = a global variable                                                               (variable)
  88. //  parameter 0 = the mode(see Note 1).                                                           (string)
  89. //  parameter 1 = the unique ID name or element object.                                           (string or element object)
  90. //  parameter 1 = the initial value.                                                              (digits, default = 0)
  91.  
  92. // **** Executing the Effect
  93. //
  94. // The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
  95. // where:
  96. //  A           = the global referencing the script instance.                                 (variable)
  97. //  parameter 0 = the start value.                                                            (digits, for opacity minimum 0, maximum 100)
  98. //  parameter 1 = the finish value.                                                           (digits, for opacity minimum 0, maximum 100)
  99. //  parameter 2 =  period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
  100. //  parameter 3 = (optional) to scale the effect time on a specified minimum/maximum.         (array, see Note 3)
  101. //                 field 0 the minimum value. (digits)
  102. //                 field 1 the maximum value. (digits)
  103. //  parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                (string, default = 'liner')
  104. //                 'sin' progression starts fast and ends slow.
  105. //                 'cos' progression starts slow and ends fast.
  106. //
  107. //  Note 1:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
  108. //  Note 2:  The default units(excepting opacity) are 'px'.
  109. //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
  110. //  Note 3:  The scale is of particular use when re-calling the effect
  111. //           in mid progression to retain an constant rate of progression.
  112. //  Note 4:  The current effect value is recorded in A.data[0].
  113. //  Note 5:  A function may be called on completion of the effect by assigning the function
  114. //           to the animator intance property .Complete.
  115. //           e.g. [instance].Complete=function(){ alert(this.data[0]); };
  116. //
  117.  
  118.  
  119.  
  120. // **** Functional Code(1.58K) - NO NEED to Change
  121.  
  122. function zxcAnimate(mde,obj,srt){
  123.  this.to=null;
  124.  this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
  125.  this.mde=mde.replace(/\W/g,'');
  126.  this.data=[srt||0];
  127.  return this;
  128. }
  129.  
  130. zxcAnimate.prototype.animate=function(srt,fin,ms,scale,c){
  131.  clearTimeout(this.to);
  132.  this.time=ms||this.time||0;
  133.  this.neg=srt<0||fin<0;
  134.  this.data=[srt,srt,fin];
  135.  this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
  136.  this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
  137.  this.inc=Math.PI/(2*this.mS);
  138.  this.srttime=new Date().getTime();
  139.  this.cng();
  140. }
  141.  
  142. zxcAnimate.prototype.cng=function(){
  143.  var oop=this,ms=new Date().getTime()-this.srttime;
  144.  this.data[0]=(this.c=='s')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:(this.c=='c')?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
  145.  this.apply();
  146.  if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
  147.  else {
  148.   this.data[0]=this.data[2];
  149.   this.apply();
  150.   if (this.Complete) this.Complete(this);
  151.  }
  152. }
  153.  
  154. zxcAnimate.prototype.apply=function(){
  155.  if (isFinite(this.data[0])){
  156.   if (this.data[0]<0&&!this.neg) this.data[0]=0;
  157.   if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(this.data[0])+'px';
  158.   else zxcOpacity(this.obj,this.data[0]);
  159.  }
  160. }
  161.  
  162. function zxcOpacity(obj,opc){
  163.  if (opc<0||opc>100) return;
  164.  obj.style.filter='alpha(opacity='+opc+')';
  165.  obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
  166. }
  167.  
  168.  
  169. </script><script type="text/javascript">
  170. <!--
  171.  
  172. function BGFade(o){
  173.  var p=document.getElementById(o.ID)
  174.  if (p){
  175.   var bgs=p.getElementsByTagName('IMG');
  176.   this.bgs=[];
  177.   for (var z0=0;z0<bgs.length;z0++){
  178.    this.bgs[z0]=new zxcAnimate('opacity',bgs[z0]);
  179.   }
  180.   this.nu=z0-1;
  181.   this.ms=o.Duration||1000;
  182.   this.hold=o.Hold||this.ms*2;
  183.   if(this.nu>0){
  184.    this.Rotate();
  185.   }
  186.  }
  187. }
  188.  
  189. BGFade.prototype.Rotate=function(){
  190.  this.bgs[this.nu].obj.style.zIndex='0';
  191.  this.bgs[this.nu].animate(100,0,this.ms);
  192.  this.nu=++this.nu%this.bgs.length;
  193.  this.bgs[this.nu].obj.style.zIndex='1';
  194.  this.bgs[this.nu].obj.style.left=-(this.bgs[this.nu].obj.width-zxcWWHS()[0])/2+'px';  // horizontal center
  195. // this.bgs[this.nu].obj.style.top=-(this.bgs[this.nu].obj.height-zxcWWHS()[1])/2+'px';  // vertical center
  196.  this.bgs[this.nu].animate(0,100,this.ms);
  197.  var oop=this;
  198.  this.to=setTimeout(function(){ oop.Rotate(); },this.hold);
  199. }
  200.  
  201. function zxcByClassName(nme,el,tag){
  202.  if (typeof(el)=='string') el=document.getElementById(el);
  203.  el=el||document;
  204.  for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
  205.   if(reg.test(els[z0].className)) ary.push(els[z0]);
  206.  }
  207.  return ary;
  208. }
  209.  
  210. function zxcWWHS(){
  211.  if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
  212.  else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
  213.  return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
  214. }
  215.  
  216.  
  217. new BGFade({
  218.  ID:'bg',        // the unique id name of the container div.                    (string)
  219.  Duration:3000,  // the duration of the fade effect in milli seconds.           (digits)
  220.  Hold:5000       // the duration of the change between images in milli seconds. (digits)
  221. });
  222. //-->
  223. </script>
I've had to modify the code to suit my needs. The bug is rather weird.

When you run the script, just before the first image appears, the last image shows up off set to the right. Then, between transition from the first to second and second to third, the image disappears to show the fourth image also off set to the right and then the next image fades it (I've tried taking out the fourth image and it does it with the penultimate image). The third fades okay to the fourth and from that point on through any further cycles it's perfect.

Can anyone work out what could be causing that because this script, otherwise, does everything I want - no more, no less?
Jun 3 '13 #1
Share this Question
Share on Google+
3 Replies


KeredDrahcir
100+
P: 426
Okay. I've have fixed most of the problem but I'd still like some help fixing the rest of the problem if anyone could help me.

It appears that the reason the SECOND TO LAST is displaying, is because apparently all images are displaying in a duplicate box; only, they disappear as their number comes up. Opacity is being given 1 to all but the last image, and the last image is given opacity -0.001, which makes it hidden, hence why you see the second-to-last instead of the last.

You need to add the following CSS code:
Expand|Select|Wrap|Line Numbers
  1. #bg img {
  2.     opacity: -0.001;
  3. }
The only problem I get now is that the last image appears before the frst image and the first image (and the last image when it appears before it) is shifted to the right on Google Chrome.
Does anyone know what could be causing this?
Jun 4 '13 #2

KeredDrahcir
100+
P: 426
I think the last image appears so that the first image has something to fade from so it can fade in at the beginning. What I need is someway to set the initial image. Can anyone suggest anything?
Jun 5 '13 #3

KeredDrahcir
100+
P: 426
I have solved the problem now. However I'm not 100% with the solution although the result is perfect. I put a background image on the container division and then put display none on the first and last image so that the background image showed through.
The only issue is that image shows for twice as long but it is an important one.

If anyone at any point can show me the way of fixing this which fixes the problem rather than finding a way round I'd like to know.
Jun 7 '13 #4

Post your reply

Sign in to post your reply or Sign up for a free account.