473,320 Members | 1,802 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Background image slideshow rogue image

KeredDrahcir
426 256MB
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
4 3839
KeredDrahcir
426 256MB
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
426 256MB
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
426 256MB
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
Sherin
77 64KB
Try This

Expand|Select|Wrap|Line Numbers
  1. <script>
  2. var slideIndex = 1;
  3. showSlides(slideIndex);
  4.  
  5. function plusSlides(n) {
  6.   showSlides(slideIndex += n);
  7. }
  8.  
  9. function currentSlide(n) {
  10.   showSlides(slideIndex = n);
  11. }
  12.  
  13. function showSlides(n) {
  14.   var i;
  15.   var slides = document.getElementsByClassName("mySlides");
  16.   var dots = document.getElementsByClassName("dot");
  17.   if (n > slides.length) {slideIndex = 1}    
  18.   if (n < 1) {slideIndex = slides.length}
  19.   for (i = 0; i < slides.length; i++) {
  20.       slides[i].style.display = "none";  
  21.   }
  22.   for (i = 0; i < dots.length; i++) {
  23.       dots[i].className = dots[i].className.replace(" active", "");
  24.   }
  25.   slides[slideIndex-1].style.display = "block";  
  26.   dots[slideIndex-1].className += " active";
  27. }
  28. </script>
Dec 24 '20 #5

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

Similar topics

1
by: Laszlo Zsolt Nagy | last post by:
I would like to load image from a directory right into an image list. I wrote a simple library that loads the images in the directory and resizes them as needed before adding to the wx.ImageList....
4
by: Tim | last post by:
Hope someone in the big wide world can help... What I want to do is have an image slideshow which automatically scrolls through a series of images very fast, then pauses when you move your mouse...
2
by: Ester | last post by:
Instead of drag and drop image button from Toolbox and name the image button id on the properties box, I would like to load image button ID from database. I created a database table that stores...
1
by: Novice | last post by:
I'm afraid I will incur the wraith of Mr. Powell on this one - but I did read his #1 FAQ and some others and I still can't figure this out. I created this little c# app. and I have a PictureBox...
1
by: Brian Basquille | last post by:
Hello all, Am interested in doing on Image SlideShow. The user will add some photos into a ListBox and then press Start Slide Show and it will then display these selected photos in a SlideShow....
3
by: RobertH | last post by:
Hello all. I have been hacking away trying to get a SQL image (jpeg) to render in a control or table row Without using the Response.BinaryWrite.... I think i might be on the verge but need a...
2
by: Robson Carvalho Machado | last post by:
Dear Friends, Does anybody knows how to use the below code with an image stored at SQL Image field? Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles...
6
by: Suraj Joneja | last post by:
Hi All, I've an image control on my ASP.net page. This displays an image named 'Logo.jpg' in the location '~\Images'. Another application can change this image. It can select any image and...
1
by: mynameisnotbob | last post by:
How could I make a random image slideshow with the images being in a folder and not listed in the head tag? (I have over 1,000 images and do not want to list them all in my index page) ? Thanks
1
by: Gaby Sandoval | last post by:
i currently use a SQL statement on my website to display a group of images (more specifically their location on the server) and links from the access database. only images that meet certain...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.