JavaScript Slideshow Problem

[Mike Copeland]

I am building a Web site for a neighborhood organization, and I want
it to have an automatic slideshow of some local pictures. I inserted
some cannibalized JavaScript code I found on the Web that does what I
want - but there's a problem. When the page loads and executes, a small
square "blob" of Brown appears on the left, near the top.

http://midtownmuseumdistrict.org/index11

When I remove the line which invokes the script action, the brown
blob doesn't appear - and it was never there before I added the scripts.
It's clear that the script somehow produces the problem, yet the color
is mentioned only in the CSS style. I don't understand the interaction
of the JavaScript very well (I'm learning as I develop this site), so I
don't where to look for information or aid...besides this NG.
Perhaps I have placed the JavaScript code in the wrong place(s), or
maybe I've invoked it all wrong...I dunno. 8<{{
Again, this is the start of my project: I'll be modifying code to
align the pictures better and improve the "randomness" of the picture
display. However, I must clear up this problem up first before moving
on. Please advise. TIA

 

[Lapinski]

I think the brown area is due to the CSS styling of the anchor tag
(index11.css line 13).
Your images are floating to the right, but the anchor tag <a
href="javascript:gotoShow();"> is displaying inline, that's why it is
showing a brown square there.

You can easily fix it by putting a class name to this anchor tag, and
give that class a CSS style to undo the background color, and make it
float to the right, and see if it fixes the problem?

Lapinski

 

[Gregor Kofler]

Mike Copeland meinte:

I am building a Web site for a neighborhood organization, and I want
it to have an automatic slideshow of some local pictures. I inserted
some cannibalized JavaScript code I found on the Web that does what I
want - but there's a problem. When the page loads and executes, a small
square "blob" of Brown appears on the left, near the top.

http://midtownmuseumdistrict.org/index11

When I remove the line which invokes the script action, the brown
blob doesn't appear - and it was never there before I added the scripts.

[snip]

A pure CSS problem. Remove the background color from this "a" element.

Gregor

PS: Both the JS and the markup are gruesome...

 

[SAM]

Le 7/19/09 2:41 PM, Gregor Kofler a écrit :

Mike Copeland meinte:

To Mike :

Please don't call images sized in 3264px × 2176px
to display them in 363px × 272px
but make specific images with the right dimensions (363px × 272px)

The slid-show was very very long to load.

 

[DBJDBJ]

Even better use http://jquery.com/demo/thickbox/

 

[Mike Copeland]

I am building a Web site for a neighborhood organization, and I

To Mike :

Please don't call images sized in 3264px × 2176px
to display them in 363px × 272px
but make specific images with the right dimensions (363px × 272px)

The slide-show was very very long to load.

Yes, good advice that I didn't know about. I've done so an can see a
definite improvement. (I also learned how to make the pictures smaller,
which is a good thing...) Thanks.

 

[Danny Wilkerson]

I look at the js you are using on the like you provided. The script
works fine but i would do it differently.

The images you use are larger then thumbs so i would load one image at
a time. Once i created the image object, i would then add an onload
event to fire a function that change the src attribute of the img tag
on my page to match.

I also would never use settimeout the way it is used here. It scares
me because it looks like an infinitely nesting loop. I would instead
use setInterval that would allow you to start and stop the image
change any time you wanted rather then just have a start with no stop
that can only go in the direction because it is hard coded into the
slideit function.

 

[Thomas 'PointedEars' Lahn]

Even better use http://jquery.com/demo/thickbox/

Don't, under any circumstances. (Cf. discussions about jQuery.)


PointedEars