Random import of jpegs? [Archive]

Click to See Complete Forum and Search --> : Random import of jpegs?

leonard_770

01-23-2003, 05:09 AM

Would any of you wise people be able to help with this problem.

I have 200 jpeg images that I want to randomly import into a slideshow.
The image changes every 1 second, (or maybe you can have a button to
select the refresh 'speed').

Also when you rollover the current image it stops the animation untill you
rollout.

Does anyone know how to do this?

Your help is greatly appreciated.

Thanks.

gil davis

01-23-2003, 06:06 AM

Do you have a slide show that you like?

Post the code and I'm sure someone can show you how to make it pause onmouseover.

leonard_770

01-23-2003, 09:22 AM

I'm using the following code but I do not know how to 'randomise' the images or how to pause the timeline.

Thanks again.

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script>
// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully

// =======================================
// set the following variables
// =======================================

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 1000

// 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] = '001.jpg'
Pic[1] = '002.jpg'
Pic[2] = '003.jpg'
Pic[3] = '004.jpg'
Pic[4] = '005.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>

</head>

<body onload="runSlideShow()" bgcolor="#000000" text="#000000">
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td id="VU" height=150 width=150> <img src="001.jpg" name='SlideShow'></td>
</tr>
</table>

</body>
</html>

leonard_770

01-23-2003, 09:26 AM

I would also like to know how I could change the time variable, so that when you click a button you could speed up the changing of the images or slow down.

var slideShowSpeed = 1000

Thanks for any help.

gil davis

01-23-2003, 10:22 AM

To make them random, replace this:

j = j + 1
if (j > (p-1)) j=0

with this:

j = Math.round(Math.random() * p);

It does not guarantee that you will not see all of the images.

To "pause" on mouseover, replace this:

<img src="001.jpg" name='SlideShow'>

with this:

<a href="#" onmouseover="clearTimeout(t)" onmouseout="t=setTimeout('runSlideShow()', slideShowSpeed)" onclick="return false">
<img src="001.jpg" name='SlideShow' border=0>
</a>

leonard_770

01-23-2003, 11:07 AM

Thanks, the pause works fine.
But when I added the 'random' script below it works for some a few seconds, (about 10), but then stops and doesn't restart? (At the moment I'm testing this with about 5 images, so I added Math.random(5) but it still does the same).

Originally posted by gil davis
To make them random, replace this:

j = j + 1
if (j > (p-1)) j=0

with this:

j = Math.round(Math.random() * p);

</a>

Thanks once again.

gil davis

01-23-2003, 11:30 AM

Oops! "j" becomes a number between 0 and "p". Maybe it should be "(p - 1)" instead.

j = Math.round(Math.random() * (p - 1));

leonard_770

01-24-2003, 04:07 AM

Thanks for that Gil, it seems to be working fine now.

Any idea on how to change the slideShowSpeed variable
when you click a button?

'var slideShowSpeed = 1000'

Thanks again.

gil davis

01-24-2003, 11:52 AM

leonard_770

01-27-2003, 03:26 AM

Thanks once again Gil, you've been a great help.

But can I ask you just one final thing;

Do you know how I could add some small description text to the side of the fotos when you rollover them?

Thanks once again.

gil davis

01-27-2003, 05:35 AM

You can use the TITLE attribute (modern browsers) or ALT attribute (older browsers) to add a "tool tip" to an image.

See http://developer.netscape.com/viewsource/wyner_balloonhelp.html if you want it to be more persistant.

Charles

01-27-2003, 05:43 AM

That ALT attribute is an accessibility feature; it specifies some text that will be displayed instead of the image when the page is rendered with a Braille or audio browser. To use it for a tool tip is most cruel.From http://www.w3.org/TR/html4/struct/objects.html#adef-alt:
Several non-textual elements (IMG, AREA, APPLET, and INPUT) let authors specify alternate text to serve as content when the element cannot be rendered normally. Specifying alternate text assists users without graphic display terminals, users whose browsers don't support forms, visually impaired users, those who use speech synthesizers, those who have configured their graphical user agents not to display images, etc.

The alt attribute must be specified for the IMG and AREA elements. It is optional for the INPUT and APPLET elements.

leonard_770

01-27-2003, 06:44 AM

So if I can't use the ALT tag then how can I display some
text on rollover of the fotos, each one having a different
name;

Pic[0] = '001.jpg' = Mountains & river
Pic[1] = '002.jpg' = Snow
Pic[2] = '003.jpg' = Kid & balloon

etc., etc.

Would it be an idea to use layers and when you rollover the image
it shows the layer and calls up the text set in the javascript?

Also all the fotos are different sizes so is it possible so the text always
appears 10 pixels from the right edge of the diffent sized images?

Thanks again for all you help.

Charles

01-27-2003, 09:30 AM

Use the TITLE attribute. That's what it's there for.From http://www.w3.org/TR/html401/struct/global.html#adef-title
Values of the title attribute may be rendered by user agents in a variety of ways. For instance, visual browsers frequently display the title as a "tool tip" (a short message that appears when the pointing device pauses over an object). Audio user agents may speak the title information in a similar context. For example, setting the attribute on a link allows user agents (visual and non-visual) to tell users about the nature of the linked resource.

gil davis

01-27-2003, 09:35 AM

Originally posted by leonard_770
So if I can't use the ALT tag then how can I display some text on rollover of the fotos, each one having a different name ...
Also all the fotos are different sizes so is it possible so the text always appears 10 pixels from the right edge of the diffent sized images?Did you follow the link I gave you?

leonard_770

01-27-2003, 10:20 AM

Hi Gil, yes I did follow the link you gave me for creating 'dynamic balloons'.
I can figure out how to use it when there is a foto on the main stage but I
don't know how I can implement this into the script so that the fotos that
haven't appeared all have different descriptions when they appear
on the page.

Anyhow thanks for your replies they've helped me a lot.

gil davis

01-27-2003, 11:41 AM

All you need is a DIV (or span) containing the required description with a style of "position: absolute; visibility: hidden; top: 0px; left: 0px" (so it doesn't add extra space to the document). Then in the mouseover you find the x,y coordinate of the image and change the "balloon" position and visibility accordingly.

leonard_770

01-30-2003, 10:29 AM

Gil, I tried using the info from the link you gave me but
I cannot get it to work. I don' know how to get the individual
descriptions of each image to appear when you roll over that
image while it's showing.

Could you post an example if you know how to do it?

Thanks.

gil davis

01-30-2003, 12:48 PM

See http://gil.davis.home.att.net/slideshow3.htm

leonard_770

01-31-2003, 02:58 AM

Thankyou very much Gil, you've been a great help.

leonard_770

02-03-2003, 11:34 AM

Originally posted by gil davis
See http://gil.davis.home.att.net/slideshow3.htm

Hi Gil, just some quick questions on the script that you put on the above link.
Is it possible to center the image and still have the text to the side? I've tired alligning the image to the "middle" and put the imag in a table but this makes the text go off position aswell. Any ideas?

Also how do you now change the timeout or pause it as you have now put the script on the image itself;
<img name="myImage" src="fotos/001.jpg" onLoad="setTimeout('slideShow()', 1000)" border=0>

I have tried to do these myself but nothing seems to work.

I promise that this is the last question.

Thanks once again, you've been a great help.

gil davis

02-03-2003, 01:02 PM

Originally posted by leonard_770
Is it possible to center the image and still have the text to the side?Just surround the link with <CENTER></CENTER> or change the link style.Also how do you now change the timeout or pause it as you have now put the script on the image itself
See http://gil.davis.home.att.net/slideshow4.htm

leonard_770

02-05-2003, 11:45 AM

Thanking you once again.