Problems with Image Viewer

JennyChaos · July 10th, 2007, 09:53 AM

Hi everyone,

I already posted this in the beginners forum, see http://www.webforumz.com/new-to-web-...ore-images.htm, but maybe it wasn't the right forum for my question as I haven't had any answer yet.

Quote:

I have just designed a website which uses the Dynamic Drive Image Thumbnail Viewer. If a visitor clicks on one of the links, the full-size image is superimposed over the page.

Everything worked fine locally because of the short loading times for the thumbnails. Now that the site is online, I have the problem that if I click on a thumbnail before all thumbnails are loaded, the attribute rel="thumbnail" in the <a> tag isn't recognised (I assume because the script hasn't been loaded yet) so that it is ignored and the full size image loads on a new page.

Is there any way I can force the script to be loaded before the images in order to avoid this problem?

Now I've already got the next problem - I have made a few adjustments to the HTML (mainly adjusting the positioning by adding some extra space to the bottom of the main element, inserting line breaks etc.) and all of a sudden the script won't work at all anymore. I must have changed part of the HTML code responsible for loading the JS properly, but can't figure it out (and I'm not the kind of person to give up easily on a problem. The old site is www.chloechaos.com and I have uploaded the new site (without the thumbnail viewer working) to the subdirectory www.chloechaos.com/test/ for comparison.

Oh, and could whoever views the site please ignore its many flaws for the time being (table-based layout, HTML not validating, quirk mode etc

- I hope that won't get me an entry in Worst websites ever!!!) as I would like to get the gallery to work before solving everything else.

Thanks,

Jenny

Captain Logical · July 10th, 2007, 12:51 PM

Quote:

Originally Posted by JennyChaos

Now I've already got the next problem - I have made a few adjustments to the HTML (mainly adjusting the positioning by adding some extra space to the bottom of the main element, inserting line breaks etc.) and all of a sudden the script won't work at all anymore

It's a syntax error clearly indicated in the console:

Code:

var thumbnailviewer={
enableTitle: true,/Should "title" attribute of link be used as description?
enableAnimation: true,/Enable fading animation?

Single-line comments begin with //

JennyChaos · July 10th, 2007, 01:50 PM

Of course, you're a star ... I did a global search & replace throughout the whole site in order to get rid of the XML style closing tags (because I had to use quirk mode in order for the vertical alignment of the main content to work and I was getting loads of validation errors). I replaced ' /' with an empty string in all files, not realising that this would not only affect the HTML but also the scripts.

Cheers,

Jenny