slide show not working when uploaded [Archive]

View Full Version : slide show not working when uploaded

dtatem

08-28-2002, 06:16 AM

This is my first time I hope I am doing it right.

I created a Slide show with java script. There are over 20 items in the show. I preload the items in the head section. I run the show on my hard drive using I.E. and Navigator, current versions. They run great. I uploaded the html only 4 items are displayed. The background place in the head section does not appear until the four item is display or after about 6 sec. After the fourth or fifth items three items are only displayed with only the top half, then the screen freezes. The items are different sizes. I have several html that preload items.

Why does the html work on the computer and not when running online?

Do the items have to be the same size?

Should I or can I remove the items out of memory before the next html loads it items?

ConfusedOfLife

08-28-2002, 10:53 AM

You said you uploaded that, gimme the URL or send me your file that I see what you did.

dtatem

08-28-2002, 06:09 PM

Do the jpg images have to be the same size?

<HTML>
<HEAD>
<TITLE>SELECTABEL SLIDE SHOW</TITLE>
<script language="JavaScript1.1">

</script>
</HEAD>
<BODY BGCOLOR="TEAL">
<a href="javascript:slidelink()"><IMG SRC="family/sterlcribt.jpg" name="slide" border="0" width="300" height="300" ALIGN="CENTER"></a>
<script>

</script>
</BODY>
</HTML>

requestcode

08-28-2002, 06:28 PM

It looks very similar to one from JavaScriptkit's Free Script Section. The way the script is wriiten you will have to have images that are all the same size for NS4 version browsers. For IE versions I believe they will change. If the images are quite large then they will take a long time to load. The reason that it does not take long on your hard drive is because your not downloading them to cache in the hard drive over your internet connection. You might want to try smaller images.

ConfusedOfLife

08-29-2002, 12:35 AM

Well, it could have been written much easier than this, anyway, the images don't have to be in the same size, coz you're using width = 100 and height = 100 in your body. And also, why are you using window.location in the end of your code?
It changes your current window's location to another location, I think it's better that you use window.open("yourImage.jpg",""); instead of that. Anyway, I think it's better that you make an array of images first, then load images into them, and then instead of all those else Ifs in the end of your code, you put switch, that's better. If I wanted to write this code, I would have written:

<head>
<script>
arr = new Array();
directory = "family/";
extension = ".jpg";
names = ["birthday3", "birthday2", "sterljust", "wifsterl",
"sterlcrib", "wifhub", "birthday3a", "wifhub"];

// For example if you just have 8 images.
// you can increase the number to your desired num.
for (i=0; i<8; i++)
arr[i] = new Image();
for (i=0; i<arr.length; i++)
arr[i].src = directory + names[i] + extension;
</script>
<script>
links = ["page1.html", "page2.html", "page3.html", "page4.html",
"page5.html", "page6.html", "page7.html", "page8.html"];
number = 0;
function slideIt()
{
document.slide.src = arr[number].src;
number = ( number == 7 ) ? ( 0 ) : ( number + 1 )
// sliding that for example each 5 seconds.
setTimeout("slideIt()", 5000);
}
</script>
</head>
<body>
<img src="" name="slide" width="100%" height="100%"
onclick="window.open(links[number],'')" style="cursor : 'hand'">
</body>

I wrote the program in here, means that I didn't check it and you know, you can not write a program and just say that it works! (I didn't have enough pictures to test it with them!), so, write it and if it had any proble, I hope that I can fix! good luck

dtatem

08-29-2002, 04:38 AM

Thank you for the improved version. I will start debugging it.
Were you able to detemine why the background color did not display until after 6 seconds?

Requestcode determined that NS4 must have same size images and that IE would work with them. Will you version get around the NS4 problem?
Requestcode:
The image took a long time to download but once downloaded after showing four images the problem that I stated above started. Would using gif image correct the problem? Is there something else causing that problem?

You are correct I did model my slide after Javascritpkit. What in the code let you know that the images must be the same size? Are you aware of a program that would allow me to make the image small without losing detail?

thank you

ConfusedOfLife

08-29-2002, 09:37 PM

Well, if your problem is the speed of download, then it doesn't have to do anything with the browser, but to be frank, I don't work with NS and I'm not experienced in that, so, I don't know if my script works in that! but I didn't use any kind of special feature, so, I think that it works under NS too, I mean I hope! check it yourself, as for as resizing the image, it's always better that you do that yourself, but if you can't, then try to make your image in the best quality possible, that when it gets resized by the browser (by having width = 100% in the image tag) you do not loose your quality.Also as I experienced, height = 100% is not gonna do anything for ya when your page is resizing, I mean it doesn't shrink or expand the image, but width=100% does. Also if your image is in a table, then most probably width = 100% doesn't work!

Vladdy

08-29-2002, 11:29 PM

Here is my take...

when you say "preload" you refer to your code:

image.src="filename";

All it does is sending the HTTP request to load the image. Javascript does not stop execution at this line waiting for the image to load.
It does not cause any problem when running from your HD. When you really have to download the images, what most probably happens is: you attempt to show image that is still loading.

True preloader would use the onLoad event of Nth image to request loading of the N+1st image. Then the function that displays a slide would check if that slide has been loaded and adjust the delay accordingly.

I have a code that does that and more. Let me know if you are interested in a "turn-key" solution...

ConfusedOfLife

09-02-2002, 08:43 PM

I'm really willing to see your code, would you post it?

Vladdy

09-03-2002, 12:47 AM

Lets say you have an array of image file names. You declare an array of image elements and a variable that contains the index of image that is currently being loaded:

var files = new Array ( "image1.gif", ... , "imageN.gif");
var images = new Array();
var iLoading=-1;

function loadNext()
{ iLoading++;
if(iLoading==files.length) return;
images[iLoading]=document.createElement('img');
images[iLoading].onload=loadNext;
images[iLoading].src=files[iLoading];
}

Function loadNext can be called when processing the body onload event to initiate the uploading of the images. The function that performs the displaying of images would look like this:

var iShowing=-1;
var imdiv=document.getElementById('elementWhereImagesGo');

function showNext()
{ iShowing++;
if(iShowing==iLoading)
{ setTimeout('showNext()',100); // Check back in 100ms
return;
}
while(imdiv.firstChild) imdiv.removeChild(imdiv.firstChild);
imdiv.appendChild(images[iShowing]);
setTimeout('showNext()',5000); // Next slide in 5 seconds
}

Thus you get independent loading and showing of the images that adjusts the delay if needed.

See this concept in action: http://www.vladdy.net/webdesign/SlideShow.html