This Message Forum is no longer in use

Please use the new Bravenet Help Forums FOUND HERE

General Forum
This Forum is Locked
Author
Comment
View Entire Thread
Re: Need help making my javascript-slideshow code work inside a table.

How do you always have all the answers at the tip of your fingers, Philo? You are amazing and the smartest web-design person I know! Thank you for answering so soon. Now I can get busy changing all of my slideshows over from photobucket to this new javascript code.

As far as your comment that you are impressed that any of my code has actually worked, I just have to agree, I am impressed that I'm able to get it to work as well.lol. With your help, I am acutally able to acocmplish things I would otherwise not be able to though.

I do have one more question if you have a chance to answer. Please let me know if there is something I can add to my slideshow code to make the pics "fade" from one to another.

Very appreciative,
Jennifer Williams

Browser: IE8 and mozilla firefox

OS: Windows Vista

Re: Need help making my javascript-slideshow code work inside a table.

Jennifer Williams
How do you always have all the answers at the tip of your fingers, Philo?


I don't always have the answers on the tip of my fingers. I usually have to do a little thinking and searching. But I started working with computers 40 years ago. They certainly were not as sophisticated as they are now. But if you work with computers long enough, you start to understand them and their various languages. Over the years I have had to write in at least a dozen different computer languages. Some, you probably never even heard of.

Jennifer Williams
I do have one more question if you have a chance to answer. Please let me know if there is something I can add to my slideshow code to make the pics "fade" from one to another.


Probably, this was one of the many features that drew you to using PhotoBucket in the first place. It's a relatively simple operation to cycle thorough a bunch of images. It only takes a couple of lines of Javascript to get things going. But when you start requiring extra features, you need to start working with scripting that is a lot more complicated.

But, that doesn't mean you have to step up your game with Javascript. There are lots of developers willing to share their scripting skills, as long as you give them credit for the work. So all you have to do is find a workable script that is pretty much "plug and play". A good source for scripts is Dynamic Drive. They have user submitted scripts for almost anything you want. One of their catigories is Slide Shows

The one called "Ultimate Fade-in slide show" was nice, but I thought it was a little over board and required some scripting from another site. But the one named "Swiss Army Image slideshow" seemed to fit the bill. There is no need to edit any of the Javascript. All the features are configured with variables when you create your image array. The array of images is simple to set up and can easily handle several hundred images.

Using the "Swiss Army Image slideshow" scripts, I created an example page named
Slide_Show_Test_2.html. Yes, I know, the name is not very creative, but the page is simple and looks pretty good. It contains two slide independent slide presentations, but their content is the same. The complete page can be downloaded using this link to Slide Show Test ZIP File (227KB). It contains one HTML file and a folder named "Slide_Show" that contains the support scripts and images.

In the example, all of the images are contained in the "Slide_Show" folder along with the image definition file, "slides.js". You should be able to add/subtract images as you see fit. The CSS file, "layout-2.1-Fixed-Fixed.css", is the style sheet for the page and the script "equalcolumns.js" is for keeping the left and right column heights equal.

The single script named "swissarmy.js" is the script that does all the work. There was only one variable in that script that I changed. In the "fadepic" function (line 166), I changed the "degree" increment from 10 to 5. This was to slow the image transition down. I thought it was originally too fast, but you can set it however you like.

The HTML file, "Slide_Show_Test_2.html", shows how simple it is to use. All of the scripting and slide definitions are read in the "head" structure. Then, each slide show instance is only a single line in the body of the page. Once you have it initially set up, all you should have to modify is the "slides.js" file that contains your image array.

Browser: FIrefox

OS: Solaris, Redhat, Fedora, Suse