Translucent slideshow Script question

1) Script Title: Translucent slideshow Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ucentslide.htm

3) Describe problem: I have a question with the script that was supplied for the Translucent slideshow. My slideshow words when the images reside in the same folder as the page, how do I reference an image in a subfolder?

1) Script Title: Translucent slideshow Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ucentslide.htm

3) Describe problem: This script is not showing my jpg file. What could be wrong with my jpg file that it is not showing? I receive a red x instead of the image.

http://65.109.28.235/images/WelcomePageSlide/FGZ17.jpg

Say the subfolder is named images and it is directly off of the folder with the page using this script in it (from the demo, additions red):

Code:

---

var slideshowcontent=new Array()
//Define slideshow contents: [image URL, OPTIONAL LINK, OPTIONAL LINK TARGET]
slideshowcontent[0]=["images/photo1.jpg", "http://www.cnn.com", "_new"]
slideshowcontent[1]=["images/photo2.jpg", "", ""]
slideshowcontent[2]=["images/photo3.jpg", "http://www.google.com", ""]

---

In short, just put the path in there as you would for the src attribute for any normal img tag on the page. The above example is of a relative path, absolute paths may also be used.

That is what I thought however when I put the path to that location I get the dredded red x when I preview the page. Why would that be?

The images aren't there.

In your script, make sure the path to and name of the image file is correct, including the use of upper and lower case letters.

There seems to be a problem with my jpg file. That is why I am getting the red x. However, I don't know what could be wrong with the file. I can open the file within MS paint, but when I add it to a page I get the red x.

Please post a link to the page on your site that contains the problematic code so we can check it out.

It does not seem to be the code but the jpg file. I have put 3 images in my slide show, 1 of the 3 images appear correctly, but the first two do not.

http://65.109.28.235/slide.htm

This one:

Code:

---

http://65.109.28.235/images/WelcomePageSlide/FGZ171.jpg

---

is a 404 file not found. It isn't on the server in that exact location with that exact name. Remember, upper and lower case matter on the web.

This one:

Code:

---

http://65.109.28.235/images/HC60AC.jpg

---

is there, has some kind of 'error' in its code under FF and IE, but displays OK in Opera. I'll see if I can make a 'good' copy of it for you.

This one:

Code:

---

http://65.109.28.235/images/HuebschLogo.bmp

---

is there, and is fine in Opera, IE, and FF.

Here's a good (web optimized) copy of the picture:

http://home.comcast.net/~jscheuer1/side/HC60AC_o.jpg

So is the problem that the picture is too big? Do I need to optimize them. The reason I am asking is because I have several images that this is happening with. Should I optimize them all?

Well, there are at least four issues here:

1. The physical dimensions of the image.
2. The location of the image.
3. The integrity of the image.
4. The byte size of the image.

Now, the physical dimensions are its width and height in pixels. They should be the same as the dimensions you are trying to display it at on the web. They are also what is changed when you 'resize' an image in a decent image editing program. If you have a 300 x 400 image and you are trying to put it in a 150 X 175 spot, it will either become distorted or cropped (cut off) in the browser, depending upon how the spot was marked up for it in the HTML code.

The location of the image is its actual address on the web. This must be listed correctly in your source code, whether HTML or javascript, otherwise the browser cannot find the image.

The integrity of the image is simply whether or not it was saved successfully by a device and/or a program as the valid format type of file that you are indicating that it is by its extension, and not damaged later. Valid types for the web are GIF, PNG, and JPG. BMP is also valid, but usually too wasteful. There may be others, the main types are the first three I mentioned, and their extensions are .gif, .png, and .jpg, respectively. Just giving an image one of these extensions doesn't make it one of these file types though, it must be saved by a program or device as that file type.

The byte size of an image is how large it is on your disk. Byte size also affects download times, so it affects how fast an image can load when viewed on the web. Obviously, you would want to optimize an image to be of the smallest possible byte size, while still looking as good as it can. It usually is a trade off, the less bytes, the less good it can look. Web images do not have to be crystal clear though they shouldn't be overly blurry or lacking in gradations of color (in the case of black and white, of shading). Different types of images lend themselves to being able to be rendered best at smaller byte sizes in various of the web formats I previously mentioned. Sometimes you can just know what format to use, other times you need to experiment. Once you pick the format, each has it own ways it can be optimized, and choices may also be made at that level. A good image optimizing program is the most effective tool for this process, but any decent image editing program like The Gimp or Paint Shop Pro can do the work if you know what you are doing.

Thank you for your help. I took the image into GIMP and changed it's size, which is doing the trick.