Spry Accordion - Thumbnail Portfolio ContentPanel Height

[Teleportable]

Hi there!

This is my very first website and I'm afraid I might be making newbie mistakes. I'm working on my own photography portfolio and I decided to use Spry Accordion to hold the thumbnails for my galleries. Currently, when I expand a tab, the content panel extends the entire height of all of the thumbnails. Is there a way to have the panel open to a fixed height so that only two rows of thumbnails are visible and have the rest of the thumbnails visible either when you scroll on the y-axis or possibly by pressing a "next" button?

Also, I might need to start a new topic for this question, but is there a way to have the larger images which are displayed in the div to the farthest right centered vertically and automatically resize to a smaller browser size?

Here's a URL to the site:

http://solaimanfazel.com/test.html

Thanks so much in advance!!!!!

[Teleportable]

After hours of research, i realized I had written the following script:

<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false, defaultPanel: -1});

I changed the "false" value to "true" and it worked!

Now I just need to learn how to auto fit the full sized images to the browser window.

Any leads?

[SrWebDeveloper]

Originally Posted by Teleportable

Now I just need to learn how to auto fit the full sized images to the browser window.

Any leads?

Might want to check our these convenient jQuery solutions:

http://buildinternet.com/2009/07/qui...r-window-size/

http://code.google.com/p/jquery-imagefit-plugin/

jQuery is a Javascript framework that makes client side scripting much easier. The first link is more of a DIY which seems to do what you want, the second link is a plugin that will resize images to a container, i.e. a div holding a picture from your folio.

Also note two very handy jQuery functions:

$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document

Change height to width for determining width of course.

[Teleportable]

Originally Posted by SrWebDeveloper

Might want to check our these convenient jQuery solutions:

http://buildinternet.com/2009/07/qui...r-window-size/

http://code.google.com/p/jquery-imagefit-plugin/

jQuery is a Javascript framework that makes client side scripting much easier. The first link is more of a DIY which seems to do what you want, the second link is a plugin that will resize images to a container, i.e. a div holding a picture from your folio.

Also note two very handy jQuery functions:

$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document

Change height to width for determining width of course.

Wow Jim! Thank you sooo much for taking the time to post those links!! I'm reading through them now and they sound exactly like what I'm looking for!

I was doing some research myself yesterday and I came across the idea of "media queries" & responsive webdesign....The concept sounds similar to these jQuery links...do you agree? Is one better than the other?

REALLY appreciate your guidance!!!!