Apple-style gallery?

[macjakob]

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

 

[kkat69]

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

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.

 

[macjakob]

Hmm, makes sense.

But how to make the big image change when a thumb is clicked on?

 

[angelwatt]

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.

 

[Fleetwood Mac]

If you're after that slick animation, check out FancyZoom. Its basically copy and paste to install, and it looks great.

 

[gonnabuyamac]

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.

Can anybody find such a tutorial? I'd really like to do something like this.

 

[Mitthrawnuruodo]

Most of the links here should still work: Javascript in Modern Web Design

Something like this one?