:? 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:
code: 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.
code: ContainerParent : document.getElementById('MyContainers')
code: Containers : ['#album1','#album3','.otheralbums:not(#al7)']
etc. |
