jQuery Cycle Plugin - Image Count - appearing at start of slideshow

jQuery Cycle Plugin - Image Count - appearing at start of slideshow

Hi,

The image count does not appear on page load, it starts when clicking through to the next slide.

I want the Image Count to appear straight away ( so it shows ' 1/8 '  for example)

here is my page code:

<!DOCTYPE html>
<html>
<head>
<title Cycle</title>
<link rel="stylesheet" type="text/css" media="screen" href="../jq.css" />
<link rel="stylesheet" type="text/css" media="screen" href="cycle.css" />
<style type="text/css">
#main {
text-align: left;
height: 550px;
width: 876px;
}
#slideshow {
float: left;
padding-top: 5px;
height: 523px;
width: 876px;
}
#prevnext {
height: 20px;
text-align: left;
margin-top: 3px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10.5px;
color: #999999;
}
#caption {
width: 100px;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 2px;
padding-left: 10px;
margin: 0px;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
a {
text-decoration: none;
color: #888888;
padding-top: 4px;
padding-right: 7px;
padding-bottom: 3px;
padding-left: 7px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #DCDCDC;
}
a:hover {
background-color: #BFBFBF;
}

a:active {
background-color: #999;
}

.worklabel {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #999999;
text-align: left;
}
p {
margin: 0px;
padding-top: 1px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#boxxy {
float: left;
height: 20px;
width: 40px;
}

#boxxy2 {
float: left;
height: 20px;
width: 40px;
}

#line {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
float: left;
text-align: center;
width: 15px;
height: 20px;
padding-right: 2px;
}


</style>
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<!-- <script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script> -->
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<!-- <script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.1.1.js"></script> -->
<script type="text/javascript">
$(function() {
    $('#slideshow').cycle({
        fx:       'fade',
        speed:     200,
        timeout:   0,
        next:     '#next',
        prev:     '#prev',
        after:     onAfter
    });
});

function onAfter(curr,next,opts) {
    var caption = (opts.currSlide + 1) + ' / ' + opts.slideCount;
    $('#caption').html(caption);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"></head>
<body>

<div id="main">

  <div id="prevnext"><div id="boxxy"> <a id="prev" href="">Prev</a></div> <div id="line">|</div> <div id="boxxy2"><a id="next" href="">Next</a></div><span id="caption"></span></div> 


        <div id="slideshow" class="pics">
            <div class="worklabel"><img src="images/slide_1.jpg" width="200" height="200" />
          <p>Kirsty MacColl CD multipack, EMI Music UK</p></div>
        <div class="worklabel"><img src="images/slide_2.jpg" width="200" height="200" />
        <p>Next work</p></div>
       <img src="images/slide_3.jpg" width="200" height="200" />
            <img src="images/slide_4.jpg" width="200" height="200" />
            <img src="images/slide_5.jpg" width="200" height="200" />
            <img src="images/slide_6.jpg" width="200" height="200" />
            <img src="images/slide_7.jpg" width="200" height="200" />
            <img src="images/slide_8.jpg" width="200" height="200" />            </div>

</div> 

</body>
</html>