Apple-style gallery?

Discussion in 'Web Design and Development' started by macjakob, Oct 16, 2008.

  1. macjakob macrumors newbie

    Joined:
    Feb 16, 2006
    #1
    Hey,

    On the website for the new MacBook, Apple added that fancy gallery with the small thumbs underneath, and clicking them the big pic changes.

    I've wanted to make something along those lines, so i tool a look in the source, but to me it seems everything's done in CSS? No javascript?

    Any help on how to make something like this would be very appreciated :)

    Thanks,

    Jakob
     
  2. kkat69 macrumors 68020

    kkat69

    Joined:
    Aug 30, 2007
    Location:
    Atlanta, Ga
    #2
    They're using a common unordered list navigation menu. No javascript is really needed here since the entire thing is done with a combination of divs and css. Basically the UL has a style (the long box) the LI have styles (the thumbnail images) and they link to an image and reference the div container that holds the image...... pretty basic mouse over image linking.
     
  3. macjakob thread starter macrumors newbie

    Joined:
    Feb 16, 2006
    #3
    Hmm, makes sense.

    But how to make the big image change when a thumb is clicked on?
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    Apple is using the scriptaculous and prototype JavaScript frameworks as can be seen the the head of the source. It's not a hard thing to create. You can likely find a tutorial on how to create this using one of the JavaScript frameworks so you don't have to come up with the code. I've created very similar galleries. The CSS here is just controlling the look of the thumbnail portion, though of course some is used in the larger image.

    My comments are based on the http://www.apple.com/macbook/ page since you didn't supply one.
     
  5. Fleetwood Mac macrumors 65816

    Fleetwood Mac

    Joined:
    Apr 27, 2006
    Location:
    Canada
    #5
    If you're after that slick animation, check out FancyZoom. Its basically copy and paste to install, and it looks great.
     
  6. gonnabuyamac macrumors 6502

    Joined:
    Sep 26, 2006
    #6
    Can anybody find such a tutorial? I'd really like to do something like this.
     
  7. Mitthrawnuruodo Moderator emeritus

    Mitthrawnuruodo

    Joined:
    Mar 10, 2004
    Location:
    Bergen, Norway

Share This Page