Without having any idea of the context of this, you identify them by checking the class and rel attributes - i.e. [class=nav][rel=next] and [class=nav][rel=prev] - which is perfectly easy to do?

No, I mean how do you determine which image to show when the user clicks Next or Previous? From what I remember, one implementation had an option to specify list of 'containers', which would be one way to group images/links.

:? You seem to be making a mountain out of a wormhill.

You show the image that is the immediate sibling of the current one.

If you are at the end of a container you do one of three things:

1) nothing (maybe display some "end" message/indication)
2) loop back to other end of current container
3) proceed to first/last image of next/prev container

Which of those three you do would be a configuration option, and/or dependant on what key the user presses.

For example:

function determineNextChild( container )
{
	if ( container.hasNextChild() ) return container.nextChild()

	switch ( EndImageBehaviour )
	{
		case 'nothing' : return null
		case 'loop'    : return container.firstChild()
		case 'proceed' : return container.nextContainer().firstChild()
		default : error("Invalid EndImageBehaviour setting")
	}

}

To identify the containers, you simply have an array of dom nodes/pointers. These are provided either as a single parent element (if the HTML is all in one piece), and/or as an array of individual containers (if they are separated/mixed in the HTML), in both cases either using CSS selectors, or as raw DOM nodes.

ContainerParent : document.getElementById('MyContainers')

Containers : ['#album1','#album3','.otheralbums:not(#al7)']

etc.

That's the problem – no assumptions are (currently, at least) made about the structure of the HTML. The script attaches a click handler to the document body and, starting with the event's target, works its way up through the DOM tree until it finds an appropriate link (in which case it shows a popup), or it reaches the top of the tree. It has no knowledge of adjacent nodes, nor at what level it should start traversing back down the tree to find the next link. There needn't even be any images on the page itself, merely links to them.

<ul id="container1">
  <li><span>(1 of 3)</span> <a href="kitten.jpg">Kitten</a></li>
  <li><span>(2 of 3)</span> <a href="puppy.jpg">Puppy</a></li>
  <li><span>(3 of 3)</span> <a href="squirrel.jpg">Squirrel</a></li>
</ul>

The code I described is here, fwiw:
https://github.com/caerphoto/QuickSlide/blob/master/quickslide.js#L87

I'm guessing you haven't looked much more into this?

 

A friend I'm making a site for wants Next and Prev buttons and I really don't want to use Lightbox :(

Heh no, I haven't had much time for it, alas. Maybe this weekend if I feel up to it, but no guarantees.

I just thought I'd add that there's no rush. I had a look for lightbox alternatives and found FancyBox which so far seems to do what I want.