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

creating a slide show effect with setTimeout for a museum

P: n/a
I am working on a kiosk for a museum, we will be using firefox as the
browser, with windows, and a touch screen.

We'd like to create a slide show of a small portfolio when the visitors
click down to the lowest level of the collection.
For instance, after choosing Africa, then Sudan, they will choose what
they would like to look at: jewelry, tapestry, metals, etc. When they
choose tapestry, there will be groups of ten thumbnails. These are a
portfolio. If they want to see that group of thumbnails in detail, they
would hit the slide show feature. We'd like the following page to
scroll through the series of 10 images. The portfolio will create the
1-10 linking and next buttons.
What I'd like to do is hide the 1-10 and next button and use
setTimeOut or something similar to tell the browser to go to the next
page in the set every 5-10 seconds.
I'm open to any suggestions out there.

Jul 23 '05 #1
Share this Question
Share on Google+
7 Replies


P: n/a
Sounds like something that flash is ideally suited for.

"7mary4" <7m****@gmail.com> wrote in message
news:11**********************@z14g2000cwz.googlegr oups.com...
I am working on a kiosk for a museum, we will be using firefox as the
browser, with windows, and a touch screen.

We'd like to create a slide show of a small portfolio when the visitors
click down to the lowest level of the collection.
For instance, after choosing Africa, then Sudan, they will choose what
they would like to look at: jewelry, tapestry, metals, etc. When they
choose tapestry, there will be groups of ten thumbnails. These are a
portfolio. If they want to see that group of thumbnails in detail, they
would hit the slide show feature. We'd like the following page to
scroll through the series of 10 images. The portfolio will create the
1-10 linking and next buttons.
What I'd like to do is hide the 1-10 and next button and use
setTimeOut or something similar to tell the browser to go to the next
page in the set every 5-10 seconds.
I'm open to any suggestions out there.

Jul 23 '05 #2

P: n/a
"7mary4" <7m****@gmail.com> skrev i meddelandet
news:11**********************@z14g2000cwz.googlegr oups.com...
I am working on a kiosk for a museum, we will be using firefox as the
browser, with windows, and a touch screen.

We'd like to create a slide show of a small portfolio when the visitors
click down to the lowest level of the collection.
For instance, after choosing Africa, then Sudan, they will choose what
they would like to look at: jewelry, tapestry, metals, etc. When they
choose tapestry, there will be groups of ten thumbnails. These are a
portfolio. If they want to see that group of thumbnails in detail, they
would hit the slide show feature. We'd like the following page to
scroll through the series of 10 images. The portfolio will create the
1-10 linking and next buttons.
What I'd like to do is hide the 1-10 and next button and use
setTimeOut or something similar to tell the browser to go to the next
page in the set every 5-10 seconds.
I'm open to any suggestions out there.


Give the pictures files names like "picture_1.jpg" to "picture_10.jpg". Then
give the <img> an id. Then have a function that gets the img with
getElementById(), finds out what the src is, strips off the trailing
numeral, increments trailing numeral, sets src to the appropriate file name,
then if there are pictures left to show calls setTimeout() with a function
call to itself as one parameter and 5000 (milliseconds) as the second
parameter. (the picture dimensions have to be identical for this to work, as
width/height isn't updated, I believe - though you could write a function
that replaces the entire <img> tag)

Or do something similar with named HTML documents (possibly
server-generated, with query strings: myslideshow.htm?picid=1) and setting
document.location.href.

Personally I hate slide shows with too long intervals. As everyone has their
own viewing rhythm, a "next" button might be a good idea.

Joakim Braun
Jul 23 '05 #3

P: n/a
On Thu, 30 Dec 2004 11:37:06 +0100, Joakim Braun
<jo**********@jfbraun.removethis.com> wrote:

[snip]
Then have a function that gets the img with
getElementById(),
Use the images collection instead. It should be quicker, it involves
typing and it's self-documenting. If you add a name attribute to the image
with the same value as the id, use of the images collection expands your
target audience to include older browsers, too.

[snip]
(the picture dimensions have to be identical for this to work, as
width/height isn't updated, I believe
If you set the width or height attributes explicitly, then yes, you'd
either have to update them along with the image, or make all of the images
the same size. If you don't set those attributes, the element will grow or
shrink to fit.
though you could write a function that replaces the entire <img> tag)
Why? Is there some reason, of which I'm not aware, where

img.width = x; // and .height where x is a number in pixels

won't work?
Personally I hate slide shows with too long intervals. As everyone has
their own viewing rhythm, a "next" button might be a good idea.


I wrote a slide show script two days ago, but the code was ugly and I
couldn't be bothered to test it properly, so I deleted it. It was fairly
versatile. Perhaps I should re-write it.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #4

P: n/a
"Michael Winter" <M.******@blueyonder.co.invalid> skrev i meddelandet
news:opsjtkbxe1x13kvk@atlantis...
On Thu, 30 Dec 2004 11:37:06 +0100, Joakim Braun
<jo**********@jfbraun.removethis.com> wrote:

<snip>
though you could write a function that replaces the entire <img> tag)


Why? Is there some reason, of which I'm not aware, where

img.width = x; // and .height where x is a number in pixels

won't work?


If you start out with an <img> with height/width attributes, then want to
replace the src with an image with different height/width, and don't want to
hard code the dimensions, you could replace the entire node and have the
browser figure out height/width as for an <img> without height/width.

But on reflection, there is removeAttribute()/removeAttributeNode(). Or
perhaps you could simply set the <img> height/width to null?

Joakim Braun
Jul 23 '05 #5

P: n/a
"Joakim Braun" <jo**********@jfbraun.removethis.com> skrev i meddelandet
news:1K*****************@nntpserver.swip.net...
"Michael Winter" <M.******@blueyonder.co.invalid> skrev i meddelandet
news:opsjtkbxe1x13kvk@atlantis...
On Thu, 30 Dec 2004 11:37:06 +0100, Joakim Braun
<jo**********@jfbraun.removethis.com> wrote: <snip>
though you could write a function that replaces the entire <img> tag)


Why? Is there some reason, of which I'm not aware, where

img.width = x; // and .height where x is a number in pixels

won't work?


If you start out with an <img> with height/width attributes, then want to
replace the src with an image with different height/width, and don't want

to hard code the dimensions, you could replace the entire node and have the
browser figure out height/width as for an <img> without height/width.

But on reflection, there is removeAttribute()/removeAttributeNode(). Or
perhaps you could simply set the <img> height/width to null?


Or don't use height/width at all.

Joakim Braun
Jul 23 '05 #6

P: n/a
On Thu, 30 Dec 2004 13:46:31 +0100, Joakim Braun
<jo**********@jfbraun.removethis.com> wrote:

[snip]
Or don't use height/width at all.


That's what I implied:

"If you set the width or height attributes explicitly, then yes,
you'd [...] have to update them [...]"

In other words, if you leave the dimensions to be defined implicitly (by
the image itself), you wouldn't have to do anything. :)

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #7

P: n/a
here is a solution for your ten images with 5 sec interval:

<script type="text/javascript">
var image1=new Image()
image1.src="1.gif"
var image2=new Image()
image2.src="2.gif"
var image3=new Image()
image3.src="3.gif"
var image4=new Image()
image4.src="4.gif"
var image5=new Image()
image5.src="5.gif"
var image6=new Image()
image6.src="6.gif"
var image7=new Image()
image7.src="7.gif"
var image8=new Image()
image8.src="8.gif"
var image9=new Image()
image9.src="9.gif"
var image10=new Image()
image10.src="10.gif"

</script>
</head>

<body>
<img src="1.gif" name="slide" >
<script type="text/javascript">
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src" )
if (step<10)
step++
else
step=1
}
var lock=false
var run
function show(){
if(lock==true){
lock=false;
window.clearInterval(run);
}
else if (lock == false) {
lock = true;
run = setInterval("slideit()", 5000);
}
}
</script>
<body Onload=show()>
"Joakim Braun" <jo**********@jfbraun.removethis.com> escreveu na mensagem
news:LM*****************@nntpserver.swip.net...
"Joakim Braun" <jo**********@jfbraun.removethis.com> skrev i meddelandet
news:1K*****************@nntpserver.swip.net...
"Michael Winter" <M.******@blueyonder.co.invalid> skrev i meddelandet
news:opsjtkbxe1x13kvk@atlantis...
> On Thu, 30 Dec 2004 11:37:06 +0100, Joakim Braun
> <jo**********@jfbraun.removethis.com> wrote:

<snip>
> > though you could write a function that replaces the entire <img> tag)
>
> Why? Is there some reason, of which I'm not aware, where
>
> img.width = x; // and .height where x is a number in pixels
>
> won't work?


If you start out with an <img> with height/width attributes, then want to
replace the src with an image with different height/width, and don't want

to
hard code the dimensions, you could replace the entire node and have the
browser figure out height/width as for an <img> without height/width.

But on reflection, there is removeAttribute()/removeAttributeNode(). Or
perhaps you could simply set the <img> height/width to null?


Or don't use height/width at all.

Joakim Braun

Jul 23 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.