It is important to verify that there are no other images with the 'packshot' class after removing it, and if so, add it to the first image.
$(document).ready(function() {
var activeClass = 'packshot', images = $("#gallerySlideshow li img");
var first = images.first().addClass(activeClass);
images.hover(function(){
// remove the class from all images who still have it, most likely only one.
images.filter("."+activeClass).removeClass(activeClass);
// add class to the element that was hovered.
$(this).addClass(activeClass);
},
function () {
// remove class from the image that was hovered out of
$(this).removeClass(activeClass);
// if no other images have the active class, then give it to the first image
if(!images.filter("."+activeClass).size()){
first.addClass(activeClass);
}
})
});
Edit:
The code provided works with a specific html structure, which makes using "siblings" inappropriate as the images are not siblings in the tree:
<ul id="gallerySlideshow">
<li>
<a href="page9.html"><img src="thumbnails/thumb9.jpg" width="158" height="236" /></a>
<ul id="noimg">
<li>
<a href=""><img src="Images/more-like-this.png" /></a>
</li>
</ul>
</li>
<li>
<a href="page9.html"><img class="box2" src="thumbnails/thumb1.jpg" /></a>
<ul id="noimg">
<li>
<a href=""><img src="Images/more-like-this.png" /></a>
</li>
</ul>
</li>
<li>
<a href="page9.html"><img class="box" src="thumbnails/thumb3.jpg" /></a>
<ul id="noimg">
<li>
<a href=""><img src="Images/more-like-this.png" /></a>
</li>
</ul>
</li>
<li>
<a href="page9.html"><img class="box1" src="thumbnails/thumb4.jpg" /></a>
<ul id="noimg">
<li>
<a href=""><img src="Images/more-like-this.png" /></a>
</li>
</ul>
</li>
<li>
<a href="page9.html"><img class="box3" src="thumbnails/thumb5.jpg" /></a>
<ul id="noimg">
<li>
<a href=""><img src="Images/more-like-this.png" /></a>
</li>
</ul>
</li>
<li>
<a href="page9.html"><img class="box4" src="thumbnails/thumb6.jpg" /></a>
<ul id="noimg">
<li>
<a href=""><img src="Images/more-like-this.png" /></a>
</li>
</ul>
</li>
</ul>