This Message Forum is no longer in use

Please use the new Bravenet Help Forums FOUND HERE


Return to Website  > Index
Recent Posts
 
General Forum
This Forum is Locked
Author
Comment
j
Jennifer Williams
Aug 30, 2010 - 10:27AM
Need help making my javascript-slideshow code work inside a table.

My slideshow code works fine when inserted onto a blank website page, but once I tranfer it into a table, it does not work anymore.

On the website I have listed, you can see that the slideshow is working fine in one place, but inside the centered table below it is still.

Anyone who can offer any help, THANK YOU!

-Jennifer Williams

Browser: IE8 and mozilla firefox

OS: Windows Vista

Email   Website
Aug 30th, 2010 - 10:27 AM
j
Jennifer Williams
Aug 30, 2010 - 11:09AM
Re: Need help making my javascript-slideshow code work inside a table.

In addition, for this main website that I have created (www.circlesranchms.com), I have fully functional slideshows working inside tables that I have imported from photobucket.com. This was an easy route to take for slideshows, but the problem with this is that the slideshows sometimes become slow or not even loadable because of website traffic. I felt like by making my own, it might eliminate this problem. Problem is, I can't get the javascript code to work once I place it inside of a table.

Thank you very much to anyone who can offer me any suggestions/information to fix my problem.

-Jennifer Williams

Browser: IE8 and mozilla firefox

OS: Windows Vista

Email   Website
Aug 30th, 2010 - 11:09 AM
k
kar
Aug 30, 2010 - 12:13PM
Re: Need help making my javascript-slideshow code work inside a table.

the html tag is closed then more code. move close html code to the end.

Philo Kvetch
Aug 30, 2010 - 12:52PM
Re: Need help making my javascript-slideshow code work inside a table.

You have your images declared twice, two "img" tags with the same name, and two functions named the same. If you name everything the same thing, only one group has any hope of operating.

As long as the definitions are the same, having the images declared twice, doesn't hurt anything. It's just a lot of extra lines of code. But when two "img" tags have the same name, only the first one is going to respond to access from Javascript. With the functions, probably only the second one was working. Since they were both trying to talk to the same "img" tag, the second instance of the function was overriding what the first instance started. With variables like "step", since it was declared outside of the functions, it is global to both of them. Honestly, I'm impressed that any of it worked at all.

I was able to take your code, quickly adjusted a few variable names, cut out the redundent definitions, and had both slide shows working. The way the code is written, make it a little messy. It's not a good idea to mix everything (HTML and Javascript) together in the body of the page. You should get as much of the Javascript out of the body as possible. A good place is in the "head" structure. And even better place is off in another file. Only one line of Javascript needs to be in the body.

As an example, take a look at this link to test5.html. You can view the source code right from your browser. Note that I reworked the code a little bit. I moved all the Javascript, except for two lines, up to the "head" structure, deleted the extra image declarations, fixed all the variable names, and fixed all the syntax (terminations on all the Javascript commands).

The images change at the same time. This gives the impression that only one might be working. So take all the references to "slide2_step", in the "slideit2" function and change them to "slide1_step". Now both scripts with be trying to increment the same variable and cause the slide shows to show different images.

Inside or outside a table should make no difference. As long as you don't have things name the same.

Browser: FIrefox

OS: Solaris, Redhat, Fedora, Suse

Website
Aug 30th, 2010 - 12:52 PM
j
Jennifer Williams
Aug 30, 2010 - 4:19PM
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

Email   Website
Aug 30th, 2010 - 4:19 PM
Philo Kvetch
Aug 31, 2010 - 9:45AM
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

Website
Aug 31st, 2010 - 9:45 AM
Return to Website  > Index