- Fading quotes help
- Posted by Adam on July 24th, 2004
OK I have a website that has three quotes on it per page. Quotes from
different influential people that relate to the page content.
I need to make it so one quote shows at a time, and fades into the next
quote, then fades into the next quote, then keeps looping like that.
So I was thinking Flash, but maybe can use Javascript for this or something?
I'd like to do this the most simple way I can, as the three quotes are
different for each page.
Input please! I need to get this completed soon.
Thanks very much!
Adam
www.webresults4u.com
- Posted by Dan on July 24th, 2004
Javascript. I use it here to fade one image to another --
http://www.danturnerfineart.com/
Very easy to use. You can have as many images as you want and set the fade
times. The code and instructions are below (it's free).
================================================== =========
Script: JavaScript Cross-Browser SlideShow Script
With Adjustable Timing and Unlimited Images
Function: Displays images continuously in a slideshow
presentation format
Browsers: All common browsers: NS3-6, IE 4-6
Author: etLux
================================================== =========
Step 1.
Put the following script in the head of your page:
<script>
// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header
// =======================================
// set the following variables
// =======================================
// Set speed (milliseconds)
var speed = 1000
// 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(){
document.images.SlideShow.src = preLoad[j].src
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', speed)
}
</script>
================================================== =========
Step 2.
Put this onload event call in your body tag:
<body onload="runSlideShow()">
================================================== =========
Step 3.
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)
<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>
================================================== =========
Dan
http://www.FreelanceWorkshops.com
"Adam" <info@_REMOVE_TO_REPLY_webresults4u.com> wrote in message
news:PDkMc.305$Ni4.8@news04.bloor.is.net.cable.rog ers.com...
- Posted by michael on July 24th, 2004
Dan I didn't know you did fine art...very nice work! Is it all digital or
do you use convential forms as well?
mb
- Posted by Dan on July 24th, 2004
Thanks, mb. These days, everything ends up in the computer. I do a lot of
scanning, from lettuce leaves to fruit slices to scraps of rusty metal. Bits
of digital photos are cool. Assembly, coloring, painting, layering and
blending all happen digitally.
I sometimes start more traditionally...the other night I made some
interesting swirls by rubbing a wet tea bag onto a paper plate -- let it dry
for a bit, then scanned the plate and blended it into a piece that needed
more texture.
Do you do fine art too?
Dan
http://www.FreelanceWorkshops.com
"michael" <no more spam> wrote in message
news:10g3pjmk77bif3f@corp.supernews.com...
- Posted by michael on July 25th, 2004
No I've been tempted to several times. Just never made the move to
try...it's a someday thing.
Very nice work and what an interesting way to achieve it. There's something
about starting with a chunk of nothing and turning it into something
beautiful.
Keep at it...maybe one of these days I'll be able to buy one of yours.
mb
- Posted by 48073 on July 26th, 2004
"michael" <no more spam> wrote:
The white space will be as white as ever before. Start when you're
able to laugh about your failures.
48073.
- Posted by Adam on August 2nd, 2004
Hey thanks Dan, that works pretty well. (Sorry for the late reply, just got
to try it now.)
Mine don't seem to fade though, it just flips to the next image.
Example here
http://equicore.com/quotetest.html
Any ideas?
Thanks.
Adam
www.webresults4u.com
"Dan" <Dan@Freelance[removethis]Workshops.com> wrote in message
news:53lMc.8767$_K2.1145@lakeread02...
- Posted by Dan on August 2nd, 2004
Doh!
Adam, add this:
// Duration of crossfade (seconds)
var crossFadeDuration = 3
Put it between the "Set Speed" and "Specify the image files" section. By
changing the number, you increase or decrease the fade time.
Dan
http://www.FreelanceWorkshops.com
"Adam" <info@_REMOVE_TO_REPLY_webresults4u.com> wrote in message
news:yVtPc.1394520$Ar.26641@twister01.bloor.is.net .cable.rogers.com...
- Posted by Adam on August 3rd, 2004
Thanks Dan, but it still doesn't seem to fade
http://www.equicore.com/quotetest.html
I put that line in, but it doesn't look like the program is calling on the
variable to use it?
Thanks.
Adam
www.webresults4u.com
"Dan" <Dan@Freelance[removethis]Workshops.com> wrote in message
news:cpwPc.1$Uh.0@fed1read02...
- Posted by Dan on August 3rd, 2004
Doh! again. Okay THIS works, Adam. I futzed around with the page and it
seemed like parts of the script were missing. I compared it with a page that
works and sure enough, I found a few more lines. Sorry, man! Here is your
complete page, tested and working (between the //////////////////////:
//////////////////////
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 6">
<title>Welcome to Adobe GoLive 6</title>
<script>
// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header
// =======================================
// set the following variables
// =======================================
// Set speed (milliseconds)
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/quotes/govt1.gif'
Pic[1] = 'images/quotes/govt2.gif'
// =======================================
// 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=crossFadeDuratio
n)"
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>
</head>
<body bgcolor="#FFFFFF" onload="runSlideShow()">
<p><table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=180 width=150>
<img src="images/quotes/govt1.gif" name='SlideShow' width=150
height=180></td>
</tr>
</table>
</p>
<p> </td>
<p> </p>
</body>
</html>
//////////////////////
Dan
http://www.FreelanceWorkshops.com
- Posted by Adam on August 4th, 2004
Thanks Dan!
Works great.
Adam
www.webresults4u.com
"Dan" <Dan@Freelance[removethis]Workshops.com> wrote in message
news:FvEPc.56$xk.26@fed1read01...
- Posted by Dan on August 4th, 2004
My pleasure, Adam. Glad you got it going.
Dan
http://www.FreelanceWorkshops.com
"Adam" <info@_REMOVE_TO_REPLY_webresults4u.com> wrote in message
news:5WXPc.195$nXg1.64@news04.bloor.is.net.cable.r ogers.com...
