HTML Image rotation, stuck

Django x2

Django x2

Django x2

Soldato
Joined
28 Sep 2008
Posts
14,218
Location
Britain
Guys, stuck here and it's winding me up.

I have a web page, the main header is a group of images that rotate using JS. I now want to add another small group of images to one of the webpages which rotate too. I assumed that I could use the same JS code but the new group of images also shows the main header group rotating. So, I changed all the variable names in the script and that hasn't worked either.

Here is my JS

Code: 
<!--
var imgShowSpeed = 3000

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'images/top.png'
Pic[1] = 'images/top1.png'
Pic[2] = 'images/top2.png'


// =======================================
// do not edit anything below this line
// =======================================

var t
var j = 1
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
   preLoad[i] = new Image()
   preLoad[i].src = Pic[i]
}

function runImgShow(){
   if (document.all){
      document.images.ImgShow.style.filter="blendTrans(duration=2)"
      document.images.ImgShow.style.filter="blendTrans(duration=crossFadeDuration)"
      document.images.ImgShow.filters.blendTrans.Apply()      
   }
   document.images.ImgShow.src = preLoad[j].src
   if (document.all){
      document.images.ImgShow.filters.blendTrans.Play()
   }
   j = j + 1
   if (j > (p-1)) j=0
   t = setTimeout('runImgShow()', imgShowSpeed)
}
//-->

<!--
var slideShowSpeed = 3000

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'images/top.jpg'
Pic[1] = 'images/top1.jpg'
Pic[2] = 'images/top2.jpg'
Pic[3] = 'images/top3.jpg'
Pic[4] = 'images/top4.jpg'
Pic[5] = 'images/top5.jpg'
Pic[6] = 'images/top6.jpg'
Pic[7] = 'images/top7.jpg'


// =======================================
// do not edit anything below this line
// =======================================

var t
var j = 1
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
   preLoad[i] = new Image()
   preLoad[i].src = Pic[i]
}

function runSlideShow(){
   if (document.all){
      document.images.SlideShow.style.filter="blendTrans(duration=2)"
      document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
      document.images.SlideShow.filters.blendTrans.Apply()      
   }
   document.images.SlideShow.src = preLoad[j].src
   if (document.all){
      document.images.SlideShow.filters.blendTrans.Play()
   }
   j = j + 1
   if (j > (p-1)) j=0
   t = setTimeout('runSlideShow()', SlideShowSpeed)
}
//-->

And here is my HTML

Code: 
<script type="text/javascript" src="scripts\imagerotatefade.js"></script>
</head>

<body onload="runImgShow()";"runSlideShow()">
<div id="wrapper"><!--start wrapper-->
<div id="topbar">
<img src="images/top.png" alt="" name='SlideShow' />
</div>
<div id="header">
<!--start header--><img src="images/top.jpg" alt="" name='ImgShow' /></div><!--end header-->

I'm not sure if you can grasp what I'm wanting to do here but hope someone can help. Thanks

:)
 
Sorry I can't help you but can I see this on your website? I need an image rotator but I have no idea how it all works...!
 
I dont have it live yet but its dead simple to get the one set working.

You need a script file. Call it imagerotatefade.js

In there, put this code:

Code: 
<!--
var slideShowSpeed = 3000

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'images/top.jpg'
Pic[1] = 'images/top1.jpg'
Pic[2] = 'images/top2.jpg'
Pic[3] = 'images/top3.jpg'
Pic[4] = 'images/top4.jpg'
Pic[5] = 'images/top5.jpg'
Pic[6] = 'images/top6.jpg'
Pic[7] = 'images/top7.jpg'


// =======================================
// do not edit anything below this line
// =======================================

var t
var j = 1
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
   preLoad[i] = new Image()
   preLoad[i].src = Pic[i]
}

function runSlideShow(){
   if (document.all){
      document.images.SlideShow.style.filter="blendTrans(duration=2)"
      document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
      document.images.SlideShow.filters.blendTrans.Apply()      
   }
   document.images.SlideShow.src = preLoad[j].src
   if (document.all){
      document.images.SlideShow.filters.blendTrans.Play()
   }
   j = j + 1
   if (j > (p-1)) j=0
   t = setTimeout('runSlideShow()', SlideShowSpeed)
}
//-->

You only need to change the Pic array stuff with the numbers and names of your pics

Then in your HTML, you call the js script like this:

Code: 
<script type="text/javascript" src="scripts\imagerotatefade.js"></script>

That goes before your closing /head tag.

Then, call the function in your HTML with the onLoad command like this:

Code: 
<body onload="runSlideShow()">

Then, where you want the image, you call it as normal but with the name='SlideShow' command like this:

Code: 
<img src="images/top.jpg" alt="" name='ImgShow' />
 
This might be a silly question, but are the rotating images on the webpage in the header as well? or on the page itself <body>? Are the divs (or tables whatever you're using) in the CSS or in the HTML, and you've changed it so that it's div#main or div#header?

Sorry if it's a daft question and I'm sure that the answer to all is the correct one!
 
You've not changed enough variables! :)

The first definition of Pic, preload, t, j and p are being overwritten by the second definitions of them.

Easy fix. change the ones you copied to Pic1[0], preload1 etc.
 
SimonCHere said:
You've not changed enough variables! :)

The first definition of Pic, preload, t, j and p are being overwritten by the second definitions of them.

Easy fix. change the ones you copied to Pic1[0], preload1 etc.
Click to expand...

Thanks, so do I need to change t, j and p to other things too?

So i have pic0[1], pic1[2], etc, and then just preload1?
 
everything you copied into the top, you will need to modify.
so
var crossFadeDuration = 3
Pic[0] = 'images/top.png'
Pic[1] = 'images/top1.png'
Pic[2] = 'images/top2.png'
var t
var j = 1
var p = Pic.length
var preLoad = new Array()

and then anywhere in the top bit that contains those variables


for (i = 0; i < p1; i++){
preLoad1 = new Image()
preLoad1.src = Pic1
}

j1 = j1 + 1
if (j1 > (p1-1)) j1=0

etc.
 
here is your top bit changed for you:
Code: 
<!--
var imgShowSpeed = 3000

// Duration of crossfade (seconds)
var imgCrossFadeDuration = 3

// Specify the image files
var Pic1 = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic1[0] = 'images/top.png'
Pic1[1] = 'images/top1.png'
Pic1[2] = 'images/top2.png'


// =======================================
// do not edit anything below this line
// =======================================

var t1
var j1 = 1
var p1 = Pic1.length

var preLoad1 = new Array()
for (i = 0; i < p1; i++){
   preLoad1[i] = new Image()
   preLoad1[i].src = Pic1[i]
}

function runImgShow(){
   if (document.all){
      document.images.ImgShow.style.filter="blendTrans(duration=2)"
      document.images.ImgShow.style.filter="blendTrans(duration=imgCrossFadeDuration)"
      document.images.ImgShow.filters.blendTrans.Apply()      
   }
   document.images.ImgShow.src = preLoad1[j1].src
   if (document.all){
      document.images.ImgShow.filters.blendTrans.Play()
   }
   j1 = j1 + 1
   if (j1 > (p1-1)) j1=0
   t1 = setTimeout('runImgShow()', imgShowSpeed)
}
//-->
 
SimonCHere said:
everything you copied into the top, you will need to modify.
so
var crossFadeDuration = 3
Pic[0] = 'images/top.png'
Pic[1] = 'images/top1.png'
Pic[2] = 'images/top2.png'
var t
var j = 1
var p = Pic.length
var preLoad = new Array()

and then anywhere in the top bit that contains those variables


for (i = 0; i < p1; i++){
preLoad1 = new Image()
preLoad1.src = Pic1
}

j1 = j1 + 1
if (j1 > (p1-1)) j1=0

etc.
Click to expand...


ok cool, so now I have this as the second part of the JS file:

Code: 
<!--
var slideShowSpeed = 3000

// Duration of crossfade (seconds)
var crossFade = 3

// Specify the image files
var Pic1 = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic1[0] = 'images/top.jpg'
Pic1[1] = 'images/top1.jpg'
Pic1[2] = 'images/top2.jpg'
Pic1[3] = 'images/top3.jpg'
Pic1[4] = 'images/top4.jpg'
Pic1[5] = 'images/top5.jpg'
Pic1[6] = 'images/top6.jpg'
Pic1[7] = 'images/top7.jpg'


// =======================================
// do not edit anything below this line
// =======================================

var t1
var j1 = 1
var p1 = Pic1.length

var preLoad1 = new Array()
for (i = 0; i < p1; i++){
   preLoad1[i] = new Image()
   preLoad1[i].src = Pic1[i]
}

function runSlideShow(){
   if (document.all){
      document.images.SlideShow.style.filter="blendTrans(duration=2)"
      document.images.SlideShow.style.filter="blendTrans

(duration=crossFade)"
      document.images.SlideShow.filters.blendTrans.Apply()      
   }
   document.images.SlideShow.src = preLoad1[j1].src
   if (document.all){
      document.images.SlideShow.filters.blendTrans.Play()
   }
   j1 = j1 + 1
   if (j1 > (p1-1)) j1=0
   t1 = setTimeout('runSlideShow()', SlideShowSpeed)
}
//-->
 
SlideShowSpeed should be slideShowSpeed

and try this instead add to the bottom of the script file:

Code: 
function runAll(){
t1 = setTimeout('runSlideShow()', slideShowSpeed)
t = setTimeout('runImgShow()', imgShowSpeed)
}

then change
Code: 
<body onload="runImgShow()";"runSlideShow()">
to
Code: 
<body onload="runAll()">


Works here.
 
Ok, you know how this is like two scripts in one file, do I have to put it twice or do I just remove the end / start half way through as top images rotate, bottom ones still don't :(

I really appreciate your help here though, so thanks so far :)
 
Html Page
Code: 
<html>
<head>

<script type="text/javascript" src="1.js" >

</script>
</head>

<body onload="runAll()">
<div id="wrapper"><!--start wrapper-->
<div id="topbar">
<img src="images/4.jpg" alt="" name='SlideShow' />
</div>
<div id="header">
<!--start header--><img src="images/1.jpg" alt="" name='ImgShow' /></div><!--end header-->

</body>
</html>

JS

Code: 
//<!--
var imgShowSpeed = 3000

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'images/4.jpg'
Pic[1] = 'images/5.jpg'

// =======================================
// do not edit anything below this line
// =======================================

var t
var j = 1
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
   preLoad[i] = new Image()
   preLoad[i].src = Pic[i]
}

function runImgShow(){

   if (document.all){
      document.images.ImgShow.style.filter="blendTrans(duration=2)"
      document.images.ImgShow.style.filter="blendTrans(duration=crossFadeDuration)"
      document.images.ImgShow.filters.blendTrans.Apply()      
   }
   document.images.ImgShow.src = preLoad[j].src
   if (document.all){
      document.images.ImgShow.filters.blendTrans.Play()
   }
   j = j + 1
   if (j > (p-1)) j=0
   t = setTimeout('runImgShow()', imgShowSpeed)
}
//-->

//<!--
var slideShowSpeed = 3000

// Duration of crossfade (seconds)
var crossFade = 3

// Specify the image files
var Pic1 = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic1[0] = 'images/1.jpg'
Pic1[1] = 'images/2.jpg'
Pic1[2] = 'images/3.jpg'

// =======================================
// do not edit anything below this line
// =======================================

var t1
var j1 = 1
var p1 = Pic1.length

var preLoad1 = new Array()
for (i = 0; i < p1; i++){
   preLoad1[i] = new Image()
   preLoad1[i].src = Pic1[i]
}

function runSlideShow(){
   if (document.all){
      document.images.SlideShow.style.filter="blendTrans(duration=2)"
      document.images.SlideShow.style.filter="blendTrans(duration=crossFade)"
      document.images.SlideShow.filters.blendTrans.Apply()      
   }
   document.images.SlideShow.src = preLoad1[j1].src
   if (document.all){
      document.images.SlideShow.filters.blendTrans.Play()
   }
   j1 = j1 + 1
   if (j1 > (p1-1)) j1=0
   t1 = setTimeout('runSlideShow()', slideShowSpeed)
}
function runAll(){
t1 = setTimeout('runSlideShow()', slideShowSpeed)
t = setTimeout('runImgShow()', imgShowSpeed)
}
//-->
 
Wow, cool, it works. Thanks.

The only thing you had different was that in the HTML my 'SlideShow' and 'ImgShow' were round the other way.

Thanks again
 
You must log in or register to reply here.
Back
Top Bottom