My Frogjs Does Not Work

[Magnum777]

1) Script Title: FROJSIMAGEGALLERY

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

3) Describe problem: I am new to this forum. But a regular at DD. I love the FROGJS IMAGE GALLERY. But it does not work for me after copying and pasting the codes in Header and DIV tags as instructed. I also attached the thumbnail images and enlarged images in my attached folder in my program. I also downloaded and attached all the files from Js1.1(java scrip of FrogJS)

When I preview or upload to the internet, all I see are all the thumbnails on a page and no enlarged whatsoever. Here is a site to show what is happening:

http://trialsites.ihoststudio.com/tr...140348/website

Please, I need assistance to get this code to work for me.

Thanks.

Magnum777

[jscheuer1]

This (from your source code):

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

is not where these script files are located. You have them in the same directory as the page. So, either make a scripts directory if you do not have one and put them in it, or list them at their current locations on the server in your source code, like so:

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

[Magnum777]

Hi John:

Thanks for your assistance. My code works now as shown below:


http://trialsites.ihoststudio.com/tr...140376/website

Please because I very new at this, would you be kind to shown me where to adjust the distance between the thumbnails and enlarged picture as shown in this script from DD:

// 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

Thanks a lot because there is no way of getting right without you.

Magnum777

[jscheuer1]

That is done in the style section. You currently have:

<style type="text/css">
    <#FrogJS{
    width: 760px;
    height: 600px;
    margin: 0 auto;
    }
    #FrogJSCredit{
    text-align: right;
    font-size: 80%;
    color: #999;
    padding: 1px;
    }
    #FrogJSCaption{
    text-align: left;
    line-height: 140%;
    }
    </style>

Get rid of the red left pointing caret and adjust the width until the spacing is to your liking. A smaller width value will bring everything in the gallery closer together.

[Magnum777]

John:

Thanks again. Originally, the red caret was not there and it displayed everything to the right of the missing caret like this on my internet page: #FrogJS{
width: 760px;
height: 600px;
margin: 0 auto;
Then I inserted the caret, and the display of words disappeared. I can go and take it out to show you what I mean.

FOR THE DISTANCE: How does these two code lines (A) and (B) relate?:

(A):

<#FrogJS{
width: 760px;
height: 600px;
margin: 0 auto;
}
#FrogJSCredit{
text-align: right;
font-size: 80&#37;;
color: #999;
padding: 1px;
}
#FrogJSCaption{
text-align: left;
line-height: 140%;
}
</style>

(B):

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

I DON'T SEE "var thumb "Top, var loadingAni and Var scalePercent in A above.

Do I have to insert an image "loading/image.gif anywhere in my code? Where is the '300' for thumbnail enlargement when fading inserted in any of the codes.

Please pardom me for asking so many questions that confuse me.

Thanks.

Magnum777

[jscheuer1]

The caret has to go. If removing it still causes a problem, that can be fixed in a proper way, once that problem is identified.

A is the style that adjusts, among other things, the width of the gallery. The wider the gallery, the more space there will be between the thumbnails and the central image.

B is a place to set some variables for the script. None of these impact the distance between the thumbnails and the central image.

Added Later:

I just tried taking out the caret and it caused no problems in IE 7, Opera or FF. If you are viewing in an editor via 'preview mode' and you get a problem like you describe, ignore it.

[Magnum777]

John:

No wonder, your other name is global moderator. Thanks a lot for your assistance. As you said, I will remove the carat. I think, it was running on IE of less than 7, maybe IE5 because my main computer that runs IE7 recently developed a power switch problem. So I switched until it is fixed.

Also, I will adjust the distances now that you have cleared some of my confusion.

You will hear more from me, but hopefully not on this issue.

You are very great. THANKS!

Magnum777

[jscheuer1]

Well, I just tested in IE 5 and the script simply didn't work - nothing on the page at all. All was well in IE 6. Both of these without the caret. I really think you must have had some other error, since corrected - like a missing tag - that caused the problem that the caret 'fixed' in the first place. It really didn't fix anything though, it just disabled the styles or a portion of them.

Good luck with your site!