Next and previous image

[george61]

Just a little problem with functions for previous and next images in a lightbox type of gallery created by me. The src of a given image is taken form href attribute of a link. I need the src of the next or previous image to be loaded dynamically maybe using next() method of Jquery and to have previousimage function working with the same piece of code. Any help will be greatly appreciated.

function nextimage(){
    $('#lightbox').remove();
	$('<div id="lightbox"></div>')
	.appendTo('body');
	$('<div id="lightbox_close" onclick="removeLightbox();"><img src="close.png" onmouseover="hovering(id);" onmouseout="backstate(id);" width="64" height="64" id="close"/></div>')
	.appendTo("#lightbox");
    $('<img src="imgs/ggallin.jpg"/>')
	.attr('class','lightboximage')
	.load(function() {
		resize();
		positionLightbox();
	})
  	.appendTo("#lightbox");
	$('<div id="nextprev"><img src="next.png" id="forward" width="96" height="96" onclick="nextimage();" onmouseover="hovering(id);" onmouseout="backstate(id);"/></div>')
	.appendTo("#lightbox")
	$('<div id="prev"><img src="prev.png" id="previous" width="96" height="96" onmouseover="hovering(id);" onmouseout="backstate(id);"/></div>')
	.appendTo("#lightbox");
  }

Here is some html code

<ul class="listing">
			<li><a href="imgs/eli.jpg" class="lightbox"><img src="thumbs/eli_t.jpg" width="150" height="100" class="images" /></a></li>
			<li><a href="imgs/ggallin.jpg" class="lightbox"><img src="thumbs/ggallin_t.jpg" width="150" height="100" class="images" /></a></li>
			<li><a href="imgs/jontarata.jpg"  class="lightbox"><img src="thumbs/jontarata_t.jpg" width="150" height="100" class="images" /></a></li>
			<li><a href="imgs/macka s tatuirovki.jpg" class="lightbox"><img src="thumbs/macka s tatuirovki_t.jpg" width="150" height="100" class="images" /></a></li>
			<li><a href="imgs/mk7.jpg" class="lightbox"><img src="thumbs/mk7_t.jpg" width="150" height="100" class="images" /></a></li>
			<li><a href="imgs/P5010345.jpg" class="lightbox"><img src="thumbs/P5010345_t.jpg" width="150" height="100" class="images" /></a></li>
		</ul>