It works fine until it gets to the end, I can't get it to select the first image when it reaches the end.
The strange thing is it works in reverse by scrolling through them with the Prev button.
<script type="text/javascript" src="scripts/projectresize.js"></script>
<div id="projectimages">
<img id="firstimg" class="show" src="http://i49.tinypic.com/2wfoi1z.jpg" height="350" href="" />
<img src="http://i49.tinypic.com/2n7m4qr.jpg" height="350" />
<img src="http://i47.tinypic.com/o6af7n.jpg" height="350" />
<img src="http://i48.tinypic.com/2dk02sk.jpg" height="350" />
<img src="http://i49.tinypic.com/2wfoi1z.jpg" height="350" />
<img id="lastimg" src="http://i49.tinypic.com/2n7m4qr.jpg" height="350" />
<br />
<p><a class="prev" href="#">Prev</a>|
<a class="next" href="#">Next</a></p>
</div>
SCRIPT:
$(document).ready(function() {
$('#projectimages a.next').click(function() {
var current = $('#projectimages .show');
var next = current.next().length ? current.next() : current.parent().children('img#firstimg');
current.hide().removeClass('show');
next.fadeIn('med').addClass('show');
});
$('#projectimages a.prev').click(function() {
var current = $('#projectimages .show');
var prev = current.prev().length ? current.prev() : current.parent().children('img#lastimg');
current.hide().removeClass('show');
prev.fadeIn('med').addClass('show');
});
});