Spry Accordion - Thumbnail Portfolio ContentPanel Height

Discussion in 'Web Design and Development' started by Teleportable, Oct 31, 2012.

  1. Teleportable macrumors newbie

    Oct 31, 2012
    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:


    Thanks so much in advance!!!!!
  2. Teleportable thread starter macrumors newbie

    Oct 31, 2012
    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?
  3. SrWebDeveloper macrumors 68000


    Dec 7, 2007
    Alexandria, VA, USA

    Might want to check our these convenient jQuery solutions:



    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.
  4. Teleportable, Nov 1, 2012
    Last edited: Nov 1, 2012

    Teleportable thread starter macrumors newbie

    Oct 31, 2012
    Wow Jim! Thank you sooo much for taking the time to post those links!! :D 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!!!!

Share This Page