Hi all,

I am looking to create a gallery using an unordered list. The gallery is created dynamically via a CMS, so the number of images will vary.

What I wanted to do was:

Display the first 9 images in the gallery (this will be styled so there are 3 images per row, so 3 columns 3 rows)
If there are more than 9 images, I wanted to, via jQuery, close the UL after the 9th image, then reopen the UL
Then again via jQuery, on load hide all but the first UL, then use Next/Previous buttons to cycle through the other ULs (the remaining images in the gallery)

I have set this up, but the problem I am having is the way the closing ul and opening ul is reordered (basically swapped round to an opening/closing ul)

My HTML is as follows:

HTML Code:
<ul>
	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
</ul>

The jQuery I am using:
Code:
$('</ul><ul>').insertAfter( $('#images li:nth-child(9n)') );
The problem is it is formatting as:

HTML Code:
<ul>
	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
	<ul></ul>
	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
	<li><a href="#"><img src="/img/image.jpg" alt="" /></a></li>
</ul>
Can anybody please help?

Many thanks