FrogJS not working

[WebProd]

1) Script Title: FrogJS Image Gallery

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

3) Describe problem: I am working on a site and all I get once the code is inserted is a blank page. http://www.dakotaindianfoundation.org/dakota_38.aspx
Can you please let me know what I am doing wrong?

Thanks,
Jen

[ajfmrf]

Try removing all the other stuff you don't need for the gallery to work.If it works then one of the other scripts is causing a problem.

[jscheuer1]

Some of the images are missing - the script depends upon all of the images being present.

You're missing the loading image. It's configured incorrectly in the frog5.js file:

//-------------------------------------------------------------
//  FrogJS v.1.1
//  Created by Eric Puidokas (www.puidokas.com)
//
//  Licensed under the Creative Commons Attribution 2.5 License
//  (http://creativecommons.org/licenses/by/2.5/)
//-------------------------------------------------------------

// CONFIGURATION VARIABLES
var thumbTop = '60px'; // distance you want you thumbnails to be from the top of their container
var loadingAni = '/client/Dakota_Indian_Founda_KA4F8J/Images/loading.gif'; // image displayed when preloading images
var scalePercent = '300'; // percent thumbnails expand when fading into main image
var mouseoverpause = true; // set true to allow full user interaction onmouseover, false for limited-interactive gallery
// Note - Gallery will pause onmouseover of t . . .

That should be:

//-------------------------------------------------------------
//  FrogJS v.1.1
//  Created by Eric Puidokas (www.puidokas.com)
//
//  Licensed under the Creative Commons Attribution 2.5 License
//  (http://creativecommons.org/licenses/by/2.5/)
//-------------------------------------------------------------

// CONFIGURATION VARIABLES
var thumbTop = '60px'; // distance you want you thumbnails to be from the top of their container
var loadingAni = '/Images/loading.gif'; // image displayed when preloading images
var scalePercent = '300'; // percent thumbnails expand when fading into main image
var mouseoverpause = true; // set true to allow full user interaction onmouseover, false for limited-interactive gallery
// Note - Gallery will pause onmouseover of t . . .

These scripts are giving errors (from the head of the page):

<script src="./prototype.js" type="text/javascript"> </script>

<script src="./scriptaculous.js?load=effects" type="text/javascript"> </script>
<script src="./frog5.js" type="text/javascript"> </script>

I found that if I replaced the first two with these hosted versions:

<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js?load=effects"></script>
<script src="./frog5.js" type="text/javascript"> </script>

The errors went away and the gallery displayed. The missing images (and/or perhaps something else) prevented it from working though.

One other tip about the missing images:

Images/Ride/ride1.jpg

is not the same as:

images/Ride/ride1.jpg

or:

Images/ride/ride1.jpg

In other words, upper and lower case letters matter on the web.

So make sure all of the images are present, including fixing the path to the loading image. Perhaps start out with just six images or so. And make the changes as shown for the scripts.

The browser cache may need to be cleared and/or the page refreshed to see changes.

There could also be other problems. But get that much done. If it works, great! If not, revise the live page so we can have a look at it to see what else it might need.

However, I found that after making the above changes and then changing all of he larger images to:

Images/Ride/ride1.jpg

and all of the thumbnails to:

Images/Ride/ride1_thumb.jpg

After that, the gallery worked.

[WebProd]

Hey John!

Thanks for your help! I have made the above edits and it is still not working.

I did change the names to Images/Ride/ but once I hit save it changed the _thumb files back to images/ride. So I just changed the file names to lowercase.

Any other suggestions on what I should try to get this working?

Thanks,
Jen

[ajfmrf]

I see this image: http://www.dakotaindianfoundation.or...ride/ride1.jpg And the loading image is on the right-which means the image path is wrong I believe.

Okay this part is probally the problem...

<a title="Mankato or Bust" href="images/ride/ride2.jpg"><img alt="Supporters follow in caravan of horse trailers." src="./images/ride/ride2_thumb.jpg" /></a>


<a title="Wokiksuye the Dakota 38 +2" href="images/ride/ride3.jpg"><img alt="Never Forget - 38 Dakota Warriors were hung at Mankato, MN on December 26, 1862. Later 2 more were hung as well." src="./images/ride/ride3_thumb.jpg" /></a>


<a title="Riders of All Nations" href="images/ride/ride4.jpg"><img alt="The Mankato Ride is open to all people regardless of race, age or religion." src="./images/ride/ride4_thumb.jpg" /></a>

John said in a previous post that all images need to be valid.All three images in the code above do not exist.Remove them and it may work.

[ajfmrf]

I see this image: http://www.dakotaindianfoundation.or...ride/ride1.jpg And the loading image is on the right-which means the image path is wrong I believe.

[jscheuer1]

Here's a list of missing images for the page:

    http://www.dakotaindianfoundation.org/basicimg/menu-bg.gif
    http://www.dakotaindianfoundation.org/basicimg/menu_bg-nor.gif
    http://www.dakotaindianfoundation.org/client/images/ride/ride12_thumb.jpg
    http://www.dakotaindianfoundation.org/client/images/ride/ride22_thumb.jpg
    http://www.dakotaindianfoundation.org/images/ride/ride19_thumb.jpg
    http://www.dakotaindianfoundation.org/images/ride/ride20_thumb.jpg
    http://www.dakotaindianfoundation.org/images/ride/ride21_thumb.jpg
    http://www.dakotaindianfoundation.org/images/ride/ride23_thumb.jpg
    http://www.dakotaindianfoundation.org/images/ride/ride24_thumb.jpg
    http://www.dakotaindianfoundation.org/images/ride/ride2_thumb.jpg
    http://www.dakotaindianfoundation.org/images/ride/ride3_thumb.jpg
    http://www.dakotaindianfoundation.org/images/ride/ride4_thumb.jpg
    http://www.dakotaindianfoundation.org/images/ride/ride2.jpg
    http://www.dakotaindianfoundation.org/images/ride/ride3.jpg
    http://www.dakotaindianfoundation.org/images/ride/ride4.jpg

I don't think the menu images are required for Frog to work. But all of the ride ones are.

[ajfmrf]

Here is a working example for you.

http://www.web-user.info/test/frog/dakota_38.html

Notice the urls are set to images in a directory called images-all of the images were put in the same directory.Including the menu images too.

Also all javascripts are in a directory called scripts.Also including the any for the menu too.

I hope this helps you see things better.

[jscheuer1]

Last I checked, they had the page working. Is there still a problem?

[ajfmrf]

Slider was not working when I checked it a bit ago.

There are a bunch of thumbs neatly set up on the site but the slider was not working unless they have a different page with it working on it.

I used the link on the initial post to visit it