Tags: gallery

20

sparkline

Thursday, March 30th, 2017

Passive-Aggressive Art Gallery — Justin Cousson

I should do this in the Clearleft kitchen.

Tuesday, April 5th, 2016

Design Patterns on CodePen

Well, this is rather wonderful! A one-stop-shop for exploring UI patterns on CodePen …this is going to be time sink.

Wednesday, August 28th, 2013

Simon Stålenhag Art Gallery

Scenes from a future Sweden.

Tuesday, August 27th, 2013

Sigh, JavaScript

A great little Tumblr blog from Dan Mall: a collection of sites that don’t work at all if JavaScript isn’t available.

‘Sfunny, I was talking about just this kind of thing at An Event Apart today.

Monday, January 24th, 2011

Media Queries

A curated collection of responsive web designs.

Monday, October 5th, 2009

printFancy, a gallery of websites in print

A CSS gallery with a difference. This one highlights sites with good print stylesheets.

Monday, June 8th, 2009

Wednesday, April 15th, 2009

we love typography. a place to bookmark and savour quality type-related images and quotes

An editorially managed collection of type-related goodies: "Think of it as FFFFound for all things type, typography, lettering, & signage."

Sunday, October 19th, 2008

web.without.words

Weekly gallery of popular websites reconstructed by removing all words and images, replacing them with blocks.

Wednesday, September 17th, 2008

Pattern Tap : Interface Collection for Design Inspiration

Collections of visual design patterns from web interfaces.

Monday, September 15th, 2008

minimalsites | minimal design css gallery

A gallery of minimally designed websites. There are some lovely grid/type-based designs on view here.

Monday, April 14th, 2008

Heavy Artillery Graffiti

These are the guys that painted the walls across from the Clearleft office. Every day, at least 10 people take pictures of their work.

Sunday, January 20th, 2008

Alison on the Behance Network

A wonderful series of black and white photographs documenting the growth of photographer Jack Radcliffe's daughter Alison from childhood to adulthood.

Thursday, April 19th, 2007

Official Website to Help Save William Morris Gallery & Vestry House Museum, Walthamstow, Waltham Forest, London

The William Morris gallery is going to be shut down unless we can do something about it. Let's do something about it.

Sunday, December 10th, 2006

StitchyMcYarnPants.com

The Museum of Kitschy Stitches: a gallery of notorious knits. Just in time for Christmas.

Tuesday, August 22nd, 2006

L o v i s a R i n g b o r g

A strange and beautiful portfolio of photographs.

Tuesday, January 3rd, 2006

Jesus and Mo

A comic strip about Jesus and Mohamed that uses my JavaScript image gallery.

Sunday, September 25th, 2005

Liquid Designs

This is something I always meant to do but never got around to: a gallery site for good liquid design.

Saturday, April 23rd, 2005

Six Ounce Board Store: Board gallery

A nice implementation of my JavaScript image gallery on a really nicely designed site

Tuesday, December 16th, 2003

JavaScript Image Gallery

This article first appeared in issue 170 of A List Apart Magazine. Here’s a quick and easy way of making a one-page gallery that uses JavaScript to load images and their captions on the fly.

This article first appeared in issue 170 of A List Apart Magazine.

Making an online gallery of pictures should be a quick process. The gap between snapping some pictures and publishing them on the web ought to be a short one. Here’s a quick and easy way of making a one-page gallery that uses JavaScript to load images and their captions on the fly.

Before I show you the JavaScript, let’s start with the mark-up.

I’ve put together some photographs that I want to make into an online gallery. The simplest way of linking to the images is to put them in a list like this:

<ul>
<li><a href="images/bananas.jpg" title="A bunch of bananas on a table">some bananas</a></li>
<li><a href="images/condiments.jpg" title="Condiments in a Chinese restaurant">two bottles</a></li>
<li><a href="images/shells.jpg" title="Seashells on a table">some shells</a></li>
</ul>

Right now, clicking on one of those links leads straight to the image. I’m going to use JavaScript to intercept that click and perform a different action instead.

The JavaScript will dynamically update a placeholder image and description, creating a slideshow effect.

I’m going to use a blank .gif for the placeholder image. I could just as easily use the first image in my gallery or some kind of “intro" image. The important thing is that the image and the description have unique IDs. I’m going to call the descriptive paragraph desc and the image placeholder.

<p id="desc">Choose an image to begin</p>
<img id="placeholder" src="images/blank.gif" alt="" />

Choose an image to begin

Don’t add any height or width attributes to the placeholder image or else all the images in the gallery will be squeezed or stretched to the same size.

Now it’s time to write the JavaScript. This should be placed in the <head> of the document or in an external file. I’ll call the function showPic

function showPic (whichpic)

As you can see, this function will be accepting just one parameter: whichpic. This refers to the link pointing to whichever picture I want to display.

The showPic function is going to be interacting with the desc and placeholder elements by referring directly to their IDs. The first thing I need to do is ensure that this is a capability of the browser executing the function. This is done by checking for the existence of document.getElementById:

if (document.getElementById)

Once the browser passes that test, the placeholder image can be swapped out. This is done by replacing the src value of the placeholder with the href value of the whichpic link:

document.getElementById('placeholder').src = whichpic.href;

At the same time, I want to swap out the text within the desc paragraph. I could use propietary JavaScript such as innerHTML but there’s a cross-browser solution available in the form of childNodes[0].nodeValue. This expression means the value of the first child node of an element. In our case, that will be the text inside the element.

The desc text can be replaced with the text from the whichpic link:

document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;

But it would be even better to replace the desc text with the content of the title attribute from the whichpic link:

document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;

I needn’t decide on one arbitrarily. I can test for the existence of a title attribute. If it exists, use that text. Otherwise, use the link text:

if (whichpic.title) {
  document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
} else {
  document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}

Lastly, I want to make sure that the whichpic link isn’t actually followed by returning false:

return false;

Unless, that is, the browser didn’t understand document.getElementById. In that case, I do want the link to be followed so true is returned instead.

Here’s the finished function:

<script type="text/javascript" language="javascript">
function showPic (whichpic) {
if (document.getElementById) {
 document.getElementById('placeholder').src = whichpic.href;
 if (whichpic.title) {
  document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
 } else {
  document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
 }
 return false;
} else {
 return true;
}
}
</script>

All that remains is to call this function from each of the links. In order to pass a value for whichpic, each of the links could be assigned a unique ID. However, it’s much easier just to pass the value this which would mean that whichpic will have the value of “this element calling the function”.

I’ll use the onclick event handler (it would be a good idea to also use onkeypress for people navigating by keyboard). Because the showPic function determines whether the link is actually followed or not, I want the action of clicking the link to return whatever the function returns. If the function returns false, the link isn’t followed. This done by using onclick="return showPic(this)".

<ul>
<li><a onclick="return showPic(this)" href="images/bananas.jpg" title="A bunch of bananas on a table">some bananas</a></li>
<li><a onclick="return showPic(this)" href="images/condiments.jpg" title="Condiments in a Chinese restaurant">two bottles</a></li>
<li><a onclick="return showPic(this)" href="images/shells.jpg" title="Seashells on a table">some shells</a></li>
</ul>

Let’s see it in action.

Choose an image to begin

There you have it: a simple JavaScript image gallery. It degrades gracefully so that older browsers can still follow the links and see the images. It works as expected on IE5+ and Netscape 6+ on Windows and Mac. It also works in Safari and all the various flavours of Mozilla like Firebird and Camino.

You can download the javascript file. Feel free to use it and customise it as you see fit. If you do end up using it, it would be nice if you could drop me a line and let me know where I can see it in action.