Using the Cycle Plugin to display a counter and captions

Using the Cycle Plugin to display a counter and captions

I'm trying to have the slide move on click but with a counter as well. When I try to incorporate the counter it breaks my test page I'm trying it on. I added captions to the slides and I realize both of them are activated by after. I'm wondering if anyone can help with a workaround on this.

  1. <!DOCTYPE html>
    <html>
    <head>
    <title>JQuery Cycle Plugin - Image Count Demo</title>
    <link rel="stylesheet" type="text/css" href="style3_DM.css">
    <script type="text/javascript" src="jquery-1.4.2.js">></script>
    <script type="text/javascript" src="jquery.cycle.all.min.js"></script>

    <script type="text/javascript">
    $(function() {
        $('.slideshow').cycle({
            fx:       'fade',
            timeout: 0,
            prev: '.prev',
            next: '.next',
            after:     function() {
                $('.caption').html(this.alt);
            }       
        });
    });

    </script>
    </head>
    <body>
            <div class="slideshow" class="images">
                <img src="images/3bf89be196.jpg" alt="this is an image" />
                <img src="images/54db8a879f-1.jpg" alt="this is also an image"  />
                <img src="images/gs14-15-16-17.jpg" />

                <img src="images/7a3d9df57f.jpg" alt="this is cool"/>
                <img src="images/8ed6cf4678-1.jpg" alt="alright" />
                <img src="images/volatilesmile.jpg" alt="???" />
                <img src="images/4845f4f48d.jpg" alt="!!!" />
                <img src="images/7c5ba163a1.jpg" alt="WHAT?!" />
            </div>
            <div id="caption"><p class="caption"></div>
            <a href="#" class="prev">&lt; Previous </a> &nbsp; | &nbsp; <a href="#" class="next">Next &gt;</a>


    </body>
    </html>