I wanted to put together a website to show off some photography work. I had imagined the layout and I just found a site that uses something very similar to what I wanted.

The site is here Christoph Laue

I’m not going to rip off the design I’m just interested in the way you navigate the galleries.

What I originally wanted to do was have a grid style layout with abstract/close up thumbnails, then you click the thumbnail to open the full picture in a new window. But also have side to side links on the big pic to go from image to image without closing the new window. That’s the feature I’d like to borrow for myself.

Also, if I’m using a grid full of thumbnails is there any argument for or against using a bunch of individual images bunched together like in the site above? Or should I arrange them in a single image like they do in Pinkbike articles e.g.

…and make it an ‘image map’ with hot spots? Do image maps still exist?

Full article HERE
I really like the layout of these Pinkbike articles.

Is there an easy way to explain this or is it a kettle of fish?

I have built websites in the past using dreamweaver/notepad/CSS so I’m not totally new to the mechanics of it but I’m extremely rusty.

Many thanks.

The stuff you’re mentioning looks perfect for hosting your own WordPress style site.

Image maps have their place they degrade nicely and they are native html 5 code.

I think a grid based layout would work a treat with what you’re looking at, but perhaps look at the wordpress option purely from the free CMS backend perspective.

I’ve thought about WordPress but I’ve never used a CMS before. I thought given how simple my site will be (words and pictures) I’d stick to what I’m familiar with. No need for any fancy plugins or themes. Plus I was quite looking forward to getting stuck in.

If I can find out how to get a similar image navigation set-up to that site I’m more than happy to stitch the rest of the site together myself.

It’s very rare to see image maps these days. You could do it like that if that’s what you’re comfortable with. It’s not ideal, but not the end of the world either.

The done way would be to list the individual thumbnails/images. What style you want them in is entirely up to you.

That Christoph Laue site is WordPress, so may even be an off the shelf template.

To open images up like in his site, you’ll need to use Javascript. The jQuery library is most popular for this. It’ll look daunting if you’ve never dealt with it before, but it’s fairly straight forward. Google ‘jquery modal windows’.

Also, if I’m using a grid full of thumbnails is there any argument for or against using a bunch of individual images bunched together like in the site above?

I’d always load them individually. Gives you the flexibility to easily & quickly change the order or individual images.

Also, doing it this way would allow for stagering the loading of the images so 2 doesn’t load until 1 has finished and 3 until 2 etc. This way it’s not all or nothing for people with slower connections.

And another thing,

It annoys me that photographers site’s rarely have the full size images loading behind the scenes.

Inevitably the viewers are going to click and look at the full size images, so why not have them pre-loading so we don’t have to wait on every mouse click. Putting them in an image viewer with previous & next button means you even know what I’m likely looking at next!

The template used on the Christoph Laue site is http://madebyraygun.com/wordpress/themes/portfolio-theme/