Forums
This topic is locked
Question on creating a rotating pic show
Posted 21 Feb 2004 03:21:25
1
has voted
21 Feb 2004 03:21:25 Marvin Harris posted:
What I am looking to do is on my home page have a picture contastanly change out every 5 seconds, only using four pics. How is this accommblished?Edited by - mdharris on 21 Feb 2004 14:31:33
Replies
Replied 21 Feb 2004 14:48:02
21 Feb 2004 14:48:02 Dave Thomas replied:
there are a number of ways to do this.
where do you want the picture changing??? in the background, in a table, as a banner...
lots of choices with lots of workarounds.
so unless you take time to explain your problem then no-one will know what you need.
Regards,
Dave
[DWMX 2004]|[FlashMX 2004 Pro]|[Studio MX 2004]|[SQL]|[Access2000/2002]|[ASP/VBScript]|[XP-Pro]
If you like online gaming, please register @ www.nova-multigaming.com
where do you want the picture changing??? in the background, in a table, as a banner...
lots of choices with lots of workarounds.
so unless you take time to explain your problem then no-one will know what you need.
Regards,
Dave
[DWMX 2004]|[FlashMX 2004 Pro]|[Studio MX 2004]|[SQL]|[Access2000/2002]|[ASP/VBScript]|[XP-Pro]
If you like online gaming, please register @ www.nova-multigaming.com
Replied 21 Feb 2004 17:19:58
21 Feb 2004 17:19:58 Marvin Harris replied:
Sorry I should be more specific. The pics will be within the body of the page and within a table. Four pics with a size of about 300x300. The page is in basic HTML with JavaScript and that is it at this time.
I should add I am trying to avoid using Flash at this time.
Edited by - mdharris on 21 Feb 2004 17:23:01
I should add I am trying to avoid using Flash at this time.
Edited by - mdharris on 21 Feb 2004 17:23:01
Replied 21 Feb 2004 19:58:44
21 Feb 2004 19:58:44 Dave Thomas replied:
ok, heres a javascript (scross-browser) with image fade slideshow.
you can set the speed, fade etc.. in the script below, just follow the comments.
<b>Step 1 :: Insert this code into the HEAD of your page.</b>
<pre id=code><font face=courier size=2 id=code>
<script>
// =======================================
// set the following variables
// =======================================
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000
// 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] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
Pic[4] = '5.jpg'
// =======================================
// do not edit anything below this line
// =======================================
var t
var j = 0
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)
}
</script>
</font id=code></pre id=code>
<b>Step 2 :: Add the onLoad event to your BODY tag</b>
<pre id=code><font face=courier size=2 id=code>
<body onload="runSlideShow()">
</font id=code></pre id=code>
<b>Step 3:: Add the table code to show the slideshow</b>
Put this in the body of your page where you want the
slide show to appear.
Set widths and heights same as images
Set image file same as first image in array Pic[] (above)
<pre id=code><font face=courier size=2 id=code>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=150 width=150>
<img src="1.jpg" name='SlideShow' width=150 height=150></td>
</tr>
</table>
</font id=code></pre id=code>
Job Done.
Regards,
Dave
[DWMX 2004]|[FlashMX 2004 Pro]|[Studio MX 2004]|[SQL]|[Access2000/2002]|[ASP/VBScript]|[XP-Pro]
If you like online gaming, please register @ www.nova-multigaming.com
you can set the speed, fade etc.. in the script below, just follow the comments.
<b>Step 1 :: Insert this code into the HEAD of your page.</b>
<pre id=code><font face=courier size=2 id=code>
<script>
// =======================================
// set the following variables
// =======================================
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000
// 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] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
Pic[4] = '5.jpg'
// =======================================
// do not edit anything below this line
// =======================================
var t
var j = 0
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)
}
</script>
</font id=code></pre id=code>
<b>Step 2 :: Add the onLoad event to your BODY tag</b>
<pre id=code><font face=courier size=2 id=code>
<body onload="runSlideShow()">
</font id=code></pre id=code>
<b>Step 3:: Add the table code to show the slideshow</b>
Put this in the body of your page where you want the
slide show to appear.
Set widths and heights same as images
Set image file same as first image in array Pic[] (above)
<pre id=code><font face=courier size=2 id=code>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=150 width=150>
<img src="1.jpg" name='SlideShow' width=150 height=150></td>
</tr>
</table>
</font id=code></pre id=code>
Job Done.
Regards,
Dave
[DWMX 2004]|[FlashMX 2004 Pro]|[Studio MX 2004]|[SQL]|[Access2000/2002]|[ASP/VBScript]|[XP-Pro]
If you like online gaming, please register @ www.nova-multigaming.com
Replied 21 Feb 2004 20:24:17
21 Feb 2004 20:24:17 Marvin Harris replied:
Thank you, much appreciated
Replied 25 Jul 2008 10:31:56
25 Jul 2008 10:31:56 Ed Brandt replied:
If anyone is out there…
I realize this forum is 4 years old, but I've been looking for just this script. The image rotation works just fine the only issue I'm having is the transitional fade.
Here's my URL:
www.brandtdesignstudio.com/
I'm using Dreamweaver CS4 to design the page and adding the script and code exactly as shown.
I'm at a loss, any suggestions?
Thanks,
Ed
I realize this forum is 4 years old, but I've been looking for just this script. The image rotation works just fine the only issue I'm having is the transitional fade.
Here's my URL:
www.brandtdesignstudio.com/
I'm using Dreamweaver CS4 to design the page and adding the script and code exactly as shown.
I'm at a loss, any suggestions?
Thanks,
Ed