Spry Accordion - Thumbnail Portfolio ContentPanel Height

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

  1. macrumors newbie

    Joined:
    Oct 31, 2012
    #1
    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!!!!!
     
  2. thread starter macrumors newbie

    Joined:
    Oct 31, 2012
    #2
    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. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #3

    Might want to check our these convenient jQuery solutions:

    http://buildinternet.com/2009/07/quick-tip-resizing-images-based-on-browser-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.
     
  4. Teleportable, Nov 1, 2012
    Last edited: Nov 1, 2012

    thread starter macrumors newbie

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