Multiple galleries with accordion

Question

Hi! I've been using Spry for a school project; I've developed
a gallery as an example.
You can see it here:
http://lavalamp.altervista.org/gallery/
I would say that it's finished, but I still have a couple of
issues I want to resolve (or understand, since my goal was not to
build a site, but to explain how Spry works!).
1) Thumbnails: they do not grow "centered"; the grown image
is positioned a little on the left. Why?
2) Thumbnails again: the images are larger than they look
(they are, more or less, 150x150 while on the screen they are
75x75). The grown thumbnails look "zoomed" and grainy even if the
images could be enlarged without any zoom effect. Is there any way
to fix this?
3) Accordion height: I found that the only way to change its
height is change the AccordionPanelContent height, and specify it
in PIXEL. A height in % is ignored. Is this intended? How could I
make an accordion that adapts itself to the browser's height?
4a) The browser: with Internet Explorer 6, the accordion does
not close its panels! Why?
4b) The browser again: Internet Explorer 6 shows the
thumbnail's "alt" text, Firefox doesn't, but I think this is a
browser issue, not Spry's
5) I'm not completely satisfied with the way thumbnails are
loaded; I made every thumbnail have a "parent ID" and every gallery
have an ID, then I check when they match and build the panels
accordingly. It seems the only way to go with this version of Spry.
6) The "repeatchildren" instruction: I thought it was meant
to cycle through the childrens of an xml node, but it seems to do
something else. I didn't really understand the difference between
repeat and repeatchildren.
It's all that comes to my mind. Thank you for any help or
suggestion.
Simone

Answer 1

Hi Simone,
I will answer to some of your questions for the moment but I
don't have an answer to all of them.
1) You have into your page the images centered by CSS:
text-align:center. In the same time the Grow Shrink effect will try
to center the image while zooming.
For this we calculate the new image size and we move the left
corner with half of the difference between the dimentions. In this
case the image will have the center in the same place and grow left
and right size equaly.
In your situation the shift will happen only after the
browser re-centered the zoomed image. The combined effect is the
one you see and the image instead of being centered is zoomed
entirely to left.
In this case you should loose one of the centering systems.
If you want the Grow Shrink effect to stop centering while zooming
you'll have to add the following option: growCenter:false
Spry.Effect.GrowShrink(targetElement, {duration: 400, from:
'100%', to: '200%', toggle: true, setup:setzindex,
finish:resetzindex, growCenter:false});
In case you want to remove the CSS text-align to center you
need to center the initial images view by specifing a margin-right
to each div.
2) This seems to be a problem mainly generated by the way the
browsers zoom the images. It appears that after the page is
rendered if you have a larger image with width and height specified
they transform the loaded images rendered to those dimensions. When
we specify the new width and height for the image they will
increase the values for the computed image and will not use the
original one. In this situation we don't have much to do.
4b) The IE as we know always does some things accordingly to
its free will. Here are some examples:
- A form element without an id attribute defined but with the
name attribute defined will take as id the name value messing lots
of JavaScript codes.
- For images if the title is not defined IE will
automatically pre-fill its value from the alt attribute. In you
situation you'll have to add also empty title attributes to force
it stop behaving the way it does.
5) 6) We are working on nested-structure as we speak. More
details about this you may find in previous answer of one of my
colleagues:
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?catid=602&threadid=1231616&fo rumid=72.
Cristian MARIN