View Full Version : Frog JS Image Gallery

10-25-2008, 12:19 PM
I am having trouble getting the Frog JS Image Gallery (http://www.dynamicdrive.com/dynamicindex4/frogjs/index.htm) to work on my website.

This is the page of my website... http://littlewigan.pwp.blueyonder.co.uk/photo_gallery.htm

Can anyone see if they can see any reason why it is not displaying properly? I can't bear another night of sitting in front of the PC with my head in my hands!!! :confused:


10-25-2008, 12:59 PM
Adam, you mess your links.

Change this part:

<a href="000013.jpg">
<img src="000013.jpg" alt="Pool With Slide" longdesc="POOL WITH SLIDE" width="243" height="179"></a><a title="Jolie Myers / The State News" rel="http://portfolio.statenews.com/users/Jolie_Myers/" href="images/1.jpg">


<a href="http://littlewigan.pwp.blueyonder.co.uk/000013.jpg">
<img src="http://littlewigan.pwp.blueyonder.co.uk/000013.jpg" alt="Pool With Slide" longdesc="POOL WITH SLIDE" width="243" height="179"></a>

The error is that you have is the invalid markup:

<a href="..."><img src.....></a><a rel="...."></a>

which should be:

<a href="..." rel="..."><img src.....></a>

10-25-2008, 01:04 PM
thanks for that rangana. I'm in work at the moment so i will have a look at what you have said later and come back to let you know.


10-25-2008, 03:13 PM
That will help. But you also need thumbnail images, more than one actual image/thumbnail pair, and you need to upload the loading.gif that comes with the distribution archive to a folder 'images' (create it if you don't already have one) off of your root folder.

10-28-2008, 10:08 PM
Sorry... More help needed.

I made a bit of progress from the other day but now my main picture does not enlarge.

Any idea where i am going wrong??


10-28-2008, 11:08 PM
i've sorted last post but i am still having issues with the size of the pictures.

I want all the thumbnails and main pics to be uniformed size.


10-29-2008, 04:19 AM
Frog doesn't resize images. It just displays them at their true dimensions. You could do some css to make the browser do so, but this often results in poor image quality (at least in some browsers) and/or (for all) wasted bandwidth and disk space. The best method is to resize the images in an image editing program so that they are each of the desired dimensions. And while you are at it (if you aren't already doing so), optimize them for minimum acceptable byte size for the desired resolution.

10-31-2008, 12:40 PM
i've resized three photos i am looking include in photo gallery that would have been too large to the same size using some photo editing software. Now the gallery doesn't work the way it should.

Can someone have a look what is wrong now.



10-31-2008, 02:30 PM
looks like i'm getting there now!! :) . Just need to need to add the rest now over the weekend, hopefully without anymore glitches!!

Thanks for help Rangana and John

11-02-2008, 01:15 PM
Right... getting there now!! Just a couple more questions if possible;

Can i position the main picture to be a few pixels lower?

Can i position the thumbnails to be inside the table a few pixels?

Can i add text above the thumbnails, simply saying 'previous' and 'next'?


11-02-2008, 02:26 PM
First of all, your page is pretty messed up in IE because you don't have a valid URL DOCTYPE. Change:

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns="http://www.w3.org/TR/REC-html40">


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

To get a bit of padding around the frog and add previous next, give it a container division and add some spans:

<div style="margin:0 auto;border:1px solid #0000FF; width: 760px; height: 409px;overflow:hidden; background-color:#C0C0C0;padding:20px;">
<span style="float:left;position:relative;z-index:10000;top:150px;padding-left:25px;">Previous</span><span style="float:right;position:relative;z-index:10000;top:150px;padding-right:40px;">Next</span>
<div id="FrogJS" style="background-color:#C0C0C0">

<a href="photogallery/Crown Sea View.jpg" title="Crown Fort Club">
<span style="text-decoration: none">
<img src="photogallery/Crown Sea View_thumb.jpg" alt="Crown Fort Club is a brand new apartment complex opening August 2007. Views overlook Sunny Beach and . . .

. . . ennis Court_thumb.jpg" alt="Imperial Fort Club is a brand new apartment complex opening August 2007. Set in a beautiful location with all the facilities you would look for combined with stunning sea views." width="110" height="82" />


And get rid of:

width: 760px;
height: 600px;
margin: 0 auto;

from the stylesheet.

11-03-2008, 02:10 PM
Thanks John.

I'm sorry but this may feel like pulling teeth now but I made your changes and it was working perfectly then i added a couple more photos and moved the order of them around a little and it's not working again now!!

Can you see where i have gone wrong?


11-03-2008, 02:48 PM
This is garbage, fix it up or get rid of it:

<a href="photogallery/Imperial Play Area View.jpg" title="Imperial Fort Club">
<span style="text-decoration: none">
&nbsp;</span></a><a href="photogallery/Imperial Pool View.jpg" title="Imperial Fort Club"><span style="text-decoration: none">


The main thing is that you've deviated from the expected frog markup inside the FrogJS division. If there are any other links or markup in there that don't fit the template as explained on the demo page, fix those as well, or get rid of them.

To help yourself in avoiding anything like this, and just in general when developing pages, you should keep a backup copy of a working version of your page(s), script(s), style(s), etc. before making changes/additions.

For small modifications that go awry, if the page is still loaded in the editor where you made the changes, you can use its undo feature.

11-07-2008, 12:31 PM
how do i change the colour of the font for the description underneath the main picture to white font?


11-07-2008, 12:45 PM
If you mean that of the caption, change highlighted to white (#fff):

text-align: right;
font-size: 80%;
color: #999;
padding: 1px;

If you mean the (long) text underneath the image, then add highlighted:

text-align: left;
line-height: 140%;

Hope that helps.