Photo album questions

Question

Hi, I have put several hours into trying to solve these
problems myself, but I am stuck. The page in question is:
http://www.georgeglazer.com/maps/newyorkmaps/hydeli/hydeliinv.html
1. Detailregion area does not display when page opens. It's
just a skinny gray box on the right. Once you click a thumbnail,
however, it displays fine, and will display all the images as you
click on them. Thinking maybe the non-working slide show buttons
were the problem, I tried replacing the <div id="controls">
area with the identical one from another page I have that works
just fine:
Why does THIS work:
http://www.georgeglazer.com/prints/aanda/fashion/kuhninv/kuhninv.html
BUT NOT THIS:
http://www.georgeglazer.com/maps/newyorkmaps/hydeli/hydeliinvquicktest.html
I've made several pages like hydeliinvquicktest.html that all
function properly, so I'm baffled.
2. How do I get a simple slide show going?
The Spry Photo Album Demo shows how powerful Spry can be, but
I don't need all that complexity, and I'm having trouble narrowing
it down to what I need -- no multiple databases, no growing and
shrinking thumbnails. All I want is to be able to put a bunch of
images and one XML dataset in a folder and have the ability to have
people click on "Previous," "Next," or "Play/Pause" in addition to
being able to click on a specific image.
One of the problems with the demo for me is the dataset names
used in the demo get confusing -- I'm having trouble following the
distinction between and relationship between when you use
dsGallery, dsGalleries, dsPhotos, and photo, not to mention, why it
is ultimately unnecessary to make any reference to "china" and and
the other folder names. And since I know next to nothing about
Javascript, I can't figure out what substitutions to make to the
gallery.js code, which is designed to work with these multiple
databases, and also can't figure out which pieces I need and
whether the pieces I don't need would get in the way if I left them
in the js doc or if everything extraneous has to be eliminated.
3. One of the problems with implementing more Spry pages is
the tedious work involved to make a little thumbnail for every
single image in a set, and then make sure they're all exactly the
same size, which is what I've done so far. I have figured out what
to do when the main image size varies, and Spry handles that well.
But here are my problems:
a. What if the thumbnails vary in size? For instance, this
hydeliinv.html page has four maps that are part of a set, but are
all different proportions, and four details I'd like to show that
represent what they look like close up, all of which are in
different proportions as well.
b. And can I have Spry call on the same image file and
display that full size for the main image, and reduced for the
thumbnail?
You'll see right now in
http://www.georgeglazer.com/maps/newyorkmaps/hydeli/hydeliinv.html
I've set the height and width in the spry: repeat tag for the
thumbnails to 100px. I tried just setting the height to that, and
width to auto; I tried just setting the height to that, and
omitting the width. In both cases, no thumbnails display at all. I
see in the Spry Photo Album Demo the use of "path" designations in
photos.xml. Could I do something with an XML doc that looks like
this to address both (a) and (b)?:
<hydeli>
<inv_item id="1">
<title>First Map</title>
<dimensions1>36.5 x 34 inches</dimensions1>
<dimensions2>37.5 x 36.25 inches</dimensions2>
<photo
path="hydeli1.jpg" width="390" height="400"
thumbpath="hydeli1.jpg" thumbwidth="98"
thumbheight="100">
</photo>
</inv_item>
<inv_item id="2">
<title>Second Map</title>
<dimensions1>36.5 x 34 inches</dimensions1>
<dimensions2>37.5 x 36.25 inches</dimensions2>
<photo
path="hydeli2.jpg" width="379" height="400"
thumbpath="hydeli2.jpg" thumbwidth="95"
thumbheight="100">
</photo>
</inv_item>
</hydeli>
I tried to figure this out, too, but to no avail.
Thanks for any help you can give me!
--Helen

Answer 1

I understand the challenge and worked out some answers that
support our photo gallery for the ski club. I wanted something
simple that would support a gallery of up to 100 pictures reliably.
Also, I wanted it to extract information from the image metadata
such as names or descriptions.
The image processing is done using photoshop macros which
create the appropriate sized image and thumbnail.
After trial and error I realized current CSS technology is
NOT capable of vast quantities of demands from more than 20
thumbnails. That's when I settled on hard formatting the thumbnails
png files with a nice black border. The thumbnails load up quite
nicely with NO style formatting. I used PNG files for the
transparency support.
The XML data is created using a program I wrote to parse the
metadata from the image files. Now that all the photoshop macros
and the XML parser is written, I can load up a large gallery in
less than thirty minutes. (Not including photo editing.)
Hope this helps.
You can see examples at
http://www.dallasskiclub.org/gallery/slide-shows/2007/05/070207-AlpeDHuez/index.html