Help with Frogsjs Image Gallery step 2

**montefegatesi** · 12-06-2007, 10:55 PM

1) Script Title:Frogsjs Image Gallery

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ogjs/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.

**jscheuer1** · 12-07-2007, 08:32 AM

Step 2 is ordinary HTML.

**montefegatesi** · 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>

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

<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." />
</a>

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

**jscheuer1** · 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:

http://www.w3schools.com/html/default.asp

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

http://www.trans4mind.com/personal_d...ide/index.html

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:

Code:

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

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:

HTML Code:

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

<a href="i . . .

**montefegatesi** · 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.

**jscheuer1** · 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 and made all of its scripts available to your page. Or, some combination of the above.

**montefegatesi** · 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.

**jscheuer1** · 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:

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>

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?

**montefegatesi** · 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.
http://www.mid-atlanticregion.com/ZZ12_peter.htm