View Full Version : Help with Frogsjs Image Gallery step 2

12-06-2007, 10:55 PM
1) Script Title:Frogsjs Image Gallery

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

3) Describe problem:I am trying to ad a page with multiple photos to a web site, using Frogsjs Image Gallery. The photos are in the images_zz_mar folder, peter sub-folder. I have been unable to configure step 2. The photos will be referred to as Party for Peter and have a caption with the name of the people in the photo.

12-07-2007, 08:32 AM
Step 2 is ordinary HTML.

12-07-2007, 02:11 PM
I do not know html, that is why I use the script. If somebody could look at step 2 and explain where the folders go, it would be very helpful. The photos are in the images_zz_mar, peter sub-folder
<div id="FrogJS">

<a href="images/1.jpg" title="Jolie Myers / The State News" rel="http://portfolio.statenews.com/users/Jolie_Myers/">
<img src="images/1_thumb.jpg" alt="An attendee of Rabbi Hendel Weingarten's Purim service at Chabad House on Elizabeth Street in East Lansing uses a noisemaker after the name of Haman is read." />

<a href="images/2.jpg" title="Jolie Myers / The State News">
<img src="images/2_thumb.jpg" alt="Junior wide receiver Terry Love is taken down by Illinois safety Kyle Knezetic September 30 at Spartan Stadium. The Fighting Illini beat the Spartans, 23-20, with a fourth-quarter field goal scored in the last 20 seconds of the game." />

<a href="images/4.jpg" title="Jolie Myers / The State News">
<img src="images/4_thumb.jpg" alt="Kevin Bozeman performs his comedy routine at Connxtions Comedy Club in Lansing shortly after the death of Richard Pryor. Bozeman said Pryor influenced all comedians, not just black performers." />

All your images must go inside the DIV tag in red. Here I've defined 3 images, with the parts in green being optional. As mentioned, the "rel" attribute if defined hyperlinks the enlarged image, while the "alt" attribute defines the description associated with the image. Finally, the "title" attribute creates a textual footnote beneath the image, used to indicate image credits, for example.

12-07-2007, 02:51 PM
That being the case, in order to use Dynamic Drive scripts, you need to learn at least of bit of it. This isn't the place for that. Look on the web for HTML tutorials. This is a pretty good one:


I started (years ago and can laugh about it now) with:


There are so many, you may find another that you prefer. Just about any can get you the basics, even though many have some outdated and/or questionable information.

I will say that it is best to use a text-only editor like Notepad. You can make up a blank page in your HTML editor if you have one, or even make up most of the page in it. Once you have things otherwise the way you want them in that, exit it and open the file in your text only editor and add in the script codes and markup. Test your page in the browser. In some cases, just loading it into your HTML editor can ruin the code for a script. So, make a backup of the page both before and after you add the script stuff to it in the text editor, before loading it into your HTML editor again.

Now, on to your question. First you need to have not just the larger images for the gallery, but also thumbnail versions of each one as well. Once you have that, if these images are all in the folder you are describing, a typical entry in the <div id="FrogJS"> division will look like so:

<a href="images_zz_mar/peter/2.jpg" title="Party for Peter / Group 2 or Whatever">
<img src="images_zz_mar/peter/2_thumb.jpg" alt="Names of the folks in this image" />

This assumes that your page is in the same folder that images_zz_mar comes off of. If you also don't know much about file and folder names as they relate to their locations, that is another thing you should learn at least something about if you want to use the scripts from Dynamic Drive.

You might want to add a heading for the gallery above or below it. It should go outside the <div id="FrogJS"> division. A good spot would be just above it, something like:

<h2>Party for Peter:</h2>
<div id="FrogJS">

<a href="i . . .

12-07-2007, 08:27 PM
The photos and the thumbnails are in the same folder. I have it set up the way you show, but it does not work. I am able to see that the thumbnails are linked (in the properties selector) to the photos. All the tumbnails appear on the page at once, and if I click on one, it opens the photo in a new page.

12-08-2007, 04:50 AM
That's actually a good sign. It means that you have done at least most, perhaps all of the Step 2 HTML portion of the script right.

Either you have missed the two red parts from Step 2, or have failed to carry out Step 1, or haven't downloaded FrogJS1.1.zip (http://www.dynamicdrive.com/dynamicindex4/frogjs/FrogJS1.1.zip) and made all of its scripts available to your page. Or, some combination of the above.

12-08-2007, 06:58 PM
Thanks for the informaton, I now have an idea of where the problem is coming from. But I am completely over my head. I have extracted the JS files from the FrogsJS1.1zip and added them to my web folder with all the other folders, including the PETER page that I am working on. When you say "made all of the scripts available to your page" are you saying that I should open the JS files and copy the contents into the PETER page. I was lost before but I am now COMPLETELY lost.

12-08-2007, 07:29 PM
Well, the scripts need to be on the server or local, wherever the page is. This (from Step 1) is what tells the browser where to look for them:

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

Notice the paths, they must be valid.

Anyways, as it could be a number of things, why not give me a link to your page?

12-08-2007, 10:54 PM
I really appreciate the help. I built the site with some scripts, but this one I can not comprehend at all. All the JS files are in the MAR folder with the IMAGE folder and all the pages. Below is the url to the PETER page.

12-09-2007, 03:26 AM
I can't find the scripts. Please give me the full URL to each one of them, like they were pages that I wanted to view.

12-09-2007, 07:45 PM
I am not sure of your request. The web site URL is http://www.mid-atlanticregion.com/
that index page has several scripts. Choose OIREACHTAS, choose INFORMATION, that brings you to the PETER page that I am working on. The part 1 and 2 of the Frog script is in red. The JS files reside in the ROOT folder.

12-09-2007, 09:14 PM
Nope. If the scripts were in the root:


wouldn't be a 404 not found.

12-10-2007, 12:24 AM
Sorry, the JS files are in the root folder but I never passed them with the FTP.

A question that has nothing to do with the problem. Are you able to look at the root folder? If yes, how?

Thanks for the all the follow ups

12-10-2007, 02:49 AM
No, I can't look in the root folder, not like a directory listing - the server won't permit it. I can look there for specific files. When you said the scripts were in the root, that gave me three filenames I could look for. It only took the one to see that they probably all weren't there.

Anyways, they are there now, but your page is pointing to them in the scripts folder:

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

You can either make that folder if it doesn't exist, and put them in there. Or I would recommend just changing the path in the external script tags on your page 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>

The leading slash means the root, and would be accessible from anywhere on the domain. It isn't needed for this particular page, but only because it is also in the root. May as well use it, in case the page gets moved to another folder.

12-10-2007, 03:22 PM
Hi John,
Surprising, but I am actually understanding what you are saying. I tried it both ways, making a scripts folder and putting the JS files in it and secondly putting the JS files out of the folder into the root folder and then removing the word script from the 3 lines. Neither way made the page work. I still see the 3 thumbs on the page and if I click on them they open full size in a seperate page.

12-10-2007, 03:31 PM
Get it together. This is a 404:


But that's where you are pointing the browser to look for it.

I had it working here using the method I recommended.

Once you have the scripts in the root and change the page to:

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

It will work. You may need to refresh the page a few times to see the changes take affect.

12-10-2007, 10:30 PM
I was waiting for the page to change in dreamweaver. It was only when I finally went to the internet that I noticed that it was working properly. But of course it only leads to the next problem. The photo loads to the left and the right thumb is partially over the photo. When I choose the next photo the left thumb is also positioned over the photo. I went into the JS files to find the photo and thumb information. I found it in the FROG file under the load image area but I do not see a positioning set up. Once again, help

12-11-2007, 06:23 AM
It is centered in most browsers. You must be using IE. For IE to center using the styles supplied, you need a valid URL DOCTYPE of HTML 4.01 transitional or greater. I would recommend strict. The DOCTYPE should be the first item in the page's source code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-e . . .

Now, your typical image is 640 pixels wide, thumbnails 120 pixels, and there needs to be room for two of those. But in your style section the #FrogJS width is set as 760px, not enough room to accommodate all of that without overlapping. Set that to 900px, or resize the images in an image editing program to make them less wide.

<style type="text/css">
width: 900px;
height: 600px;
margi . . .

12-12-2007, 03:06 AM
Thanks, John I can not say thank you enough. You not only helped me to get the script working, but I also learned a few things about how scripts work and how they are related. The site is working. Again Thanks.