Lunarpages Web Hosting Forum

Author Topic: Help with JavaScript Photo Gallery  (Read 1079 times)

Offline Galen

  • Space Explorer
  • ***
  • Posts: 9
    • Galen Evans, Photographer
Help with JavaScript Photo Gallery
« on: January 05, 2006, 10:03:51 AM »
Okay, first a word of warning:  I am in no way a programmer or a web designer; I'm just one of these guys that likes to get my hands dirty and learn how things work.  LOL  With that in mind:

I've been working on setting up a site to display and perhaps promote my photographic work, and for the most part the site is up and working like a charm.  I've gotten mostly positive response regarding the site, the only exception being that a few people have commented that it'd be nice to have thumbnails of all of the images. 

So I found a bit of script that would allow me to do this and meets with my other criteria for the site -  easy to maintain, fits in the page, clean design - and has the added benefit of greatly reducing the number of pages since I don't have to have a page for every single image.  An example of what the final page looks like is here:

http://www.galen-evans.com/galleries/portrait/portrait_test.htm

Here's where I'm stumped:  If I load the page locally on my computer (is that redundant?), everything works fine and the images appear in the main window with the proper dimensions.  But, when I upload the page and view it from the site, a problem develops with some of the pics.  If you click on any of the pics that don't have the same dimensions as the first image, the pic gets squashed (technical term) in the main window (most obvious with the landscape/horizontal pics).  Any ideas why this happens on the server version and not the local version and better yet, how I can resolve the problem?

If it helps, this is the script that I'm using:

<script>
function showPic (whichpic) {
   if (document.getElementById) {
      document.getElementById('placeholder').src = whichpic.href;
      if (whichpic.title) {
         document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
      } else {
         document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
      }
      return false;
   } else {
      return true;
   }
}
</script>

Thank you in advance for any help that you can offer,

Galen
www.galen-evans.com


Offline Galen

  • Space Explorer
  • ***
  • Posts: 9
    • Galen Evans, Photographer
Follow-up to JavaScript Photo Gallery problem
« Reply #1 on: January 06, 2006, 08:28:15 PM »
Well, I've found and tried four or five variations of this script idea -  found on various sites - and all have the same result.  What I've been able to figure out is that regardless of the script, if I specify a starting image in the main window, all other images will try to mimic the same dimensions, regardless of their actual dimensions, hence the "squashing".  However, if I leave the introductory image blank, all of the others will display correctly when I select the thumbnails.


Here's the example with the introductory image in place:

http://www.galen-evans.com/galleries/portrait/portrait_test.htm


And here's how it works with the image src left blank:

http://www.galen-evans.com/galleries/portrait/portrait_test2.htm


The script remains unchanged.

Does anyone have an idea of how I can get around this issue and have an introductory image without the other ones subsequently getting distorted?

Thanks,
Galen


Offline GMTurner

  • Berserker Poster
  • *****
  • Posts: 7479
    • Turner's Lounge
Re: Help with JavaScript Photo Gallery
« Reply #2 on: January 06, 2006, 08:52:19 PM »
It appears that when you are putting the placeholder image in at the start a height and width are being specified... it shows up in
Code: [Select]
<img id="placeholder" src="images/pt001.jpg" alt="Current Image" width="223" height="335" />

If you take out that width & height specification for the first image, that might fix the problem...
The above information may or may not reflect current policy, opinions, or views since it was likely made almost 10 years ago.

Offline Galen

  • Space Explorer
  • ***
  • Posts: 9
    • Galen Evans, Photographer
Re: Help with JavaScript Photo Gallery
« Reply #3 on: January 06, 2006, 09:10:05 PM »
GMTurner,
That was it!  Actually, I had no dimensions specified in the original HTML, so I never thought to check the source once I uploaded, but apparently FrontPage adds them in on upload - which explains why the problem didn't appear when loaded locally!  By uploading via CPanel, the page remained intact and the problem disappeared. 

Thanks soooo much for pointing that out!

Galen

Offline GMTurner

  • Berserker Poster
  • *****
  • Posts: 7479
    • Turner's Lounge
Re: Help with JavaScript Photo Gallery
« Reply #4 on: January 06, 2006, 09:37:31 PM »
No problem, glad I could help :thumb:

Pics look good by the way :)
The above information may or may not reflect current policy, opinions, or views since it was likely made almost 10 years ago.