473,698 Members | 2,129 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

creating a slide show effect with setTimeout for a museum

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
7 3055
Sounds like something that flash is ideally suited for.

"7mary4" <7m****@gmail.c om> wrote in message
news:11******** **************@ z14g2000cwz.goo glegroups.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
"7mary4" <7m****@gmail.c om> skrev i meddelandet
news:11******** **************@ z14g2000cwz.goo glegroups.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.locati on.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
On Thu, 30 Dec 2004 11:37:06 +0100, Joakim Braun
<jo**********@j fbraun.removeth is.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
"Michael Winter" <M.******@bluey onder.co.invali d> skrev i meddelandet
news:opsjtkbxe1 x13kvk@atlantis ...
On Thu, 30 Dec 2004 11:37:06 +0100, Joakim Braun
<jo**********@j fbraun.removeth is.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 ()/removeAttribute Node(). Or
perhaps you could simply set the <img> height/width to null?

Joakim Braun
Jul 23 '05 #5
"Joakim Braun" <jo**********@j fbraun.removeth is.com> skrev i meddelandet
news:1K******** *********@nntps erver.swip.net. ..
"Michael Winter" <M.******@bluey onder.co.invali d> skrev i meddelandet
news:opsjtkbxe1 x13kvk@atlantis ...
On Thu, 30 Dec 2004 11:37:06 +0100, Joakim Braun
<jo**********@j fbraun.removeth is.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 ()/removeAttribute Node(). 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
On Thu, 30 Dec 2004 13:46:31 +0100, Joakim Braun
<jo**********@j fbraun.removeth is.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
here is a solution for your ten images with 5 sec interval:

<script type="text/javascript">
var image1=new Image()
image1.src="1.g if"
var image2=new Image()
image2.src="2.g if"
var image3=new Image()
image3.src="3.g if"
var image4=new Image()
image4.src="4.g if"
var image5=new Image()
image5.src="5.g if"
var image6=new Image()
image6.src="6.g if"
var image7=new Image()
image7.src="7.g if"
var image8=new Image()
image8.src="8.g if"
var image9=new Image()
image9.src="9.g if"
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.imag es)
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.clearInt erval(run);
}
else if (lock == false) {
lock = true;
run = setInterval("sl ideit()", 5000);
}
}
</script>
<body Onload=show()>
"Joakim Braun" <jo**********@j fbraun.removeth is.com> escreveu na mensagem
news:LM******** *********@nntps erver.swip.net. ..
"Joakim Braun" <jo**********@j fbraun.removeth is.com> skrev i meddelandet
news:1K******** *********@nntps erver.swip.net. ..
"Michael Winter" <M.******@bluey onder.co.invali d> skrev i meddelandet
news:opsjtkbxe1 x13kvk@atlantis ...
> On Thu, 30 Dec 2004 11:37:06 +0100, Joakim Braun
> <jo**********@j fbraun.removeth is.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 ()/removeAttribute Node(). 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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
3480
by: Al Davis | last post by:
Note: I tried cross-posting this message to several newsgoups, including comp.lang.perl.misc, c.l.p.moderated, comp.infosystems.www.authoring.cgi, comp.lang.javascript and comp.lang.php. Nothing appeared on my news server, so I'm trying again - this time posting a separate copy of the message to each group. I'm thinking this should be fairly easy to accomplish - a quick and dirty ... what? ... script? program?
1
4324
by: ajay | last post by:
I have following code for a slide menu but i twiked it to work for a single level menu. Open it in a Browser to get a clear picture. I have 2 Qs 1) How to make first entry as non-link. i.e i want to make first text as Table Heading/menu category. For examle in the given menu i want to make a heading as "Comp. Languages" which won't be a link. 2) The position of this menu is absolute to the page. I want to make it absolute to the Table...
9
12393
by: Michael Burtenshaw | last post by:
I would like to make a slide show using random images. The problem is my host is 250.com, and they don't support cgi-programs. Is there another way to accomplish random images?
3
4028
by: Wazz Up | last post by:
Hi, I'm trying run an image slide show where the images rotate once each, then after the last image in the array has been displayed for the specified amount of time, a redirection to another page occurs. The problem I'm having is that the redirection happens as soon as the last image is displayed. Here's an example of a normal version where the images rotate continuously and the redirect version that isn't working properly:
7
3061
by: Rudy | last post by:
Hello All! After working in the television industry, moving to a developing career has been interesting to say the least. 3 years of developing with books, and the help of you fine folks on this forum, I have learned quite a bit. But that doesn't mean anything when your looking for your first developing gig. 15 years in television production, and not having a college degree in Computer Science does not make me a very good prospect....
3
1845
by: ATS | last post by:
I'm trying to set up a slide show on a web page using Javascript. Here is the code I have so far: <script language="javascript"> alert("**in test area 1"); slides = new Array(); slides = new Image(); slides = new Image();
1
1636
by: GabrielESandoval | last post by:
I am converting powerepoint presentations to images I want to display as slide shows. My questions is I want it so that when a link is clike the slide show opens. The slides will be initially timed but there are also controls so that if they want to go back or advance the images at their own pace. Is this too complicated?? I know how to make a slow that displays images ina times sequence, but Ive never added controls that would stop...
1
1402
by: The Starmaker | last post by:
Is there a command I can add to this script that will end the slideshow at the last image so it doesn't run continously? Pic = '1.jpg' Pic = '2.jpg' Pic = '3.jpg' Pic = '4.jpg' Pic = '5.jpg' (stop here)
3
5256
by: Beamer | last post by:
Hi I am trying to build a roating slide effect in javascript. Basically, I have a list like below <ul id="slideShowCnt"> <li id="slide0"><img .../></li> <li id="slide0"><img .../></li> <li id="slide0"><img .../></li> <li id="slide0"><img .../></li> <li id="slide0"><img .../></li> <li id="slide0"><img .../></li>
0
8668
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, weíll explore What is ONU, What Is Router, ONU & Routerís main usage, and What is the difference between ONU and Router. Letís take a closer look ! Part I. Meaning of...
0
8597
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9148
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9012
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
5857
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4611
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3034
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2319
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
1992
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.