jQuery - Cycle Plugin Pause/Play button

Question

I am using the Cycle Slider plugin found at http://jquery.malsup.com/cycle/

I've included user controls on the bottom with images ( a left arrow for Prev, right arrow for Next, and two bars for Play/Pause). The Prev and Next buttons work perfectly. I'm stuck on the Play/Pause button though.

I don't know how to make the image change to a Play symbol when clicked and back to a Pause symbol when clicked again.

Here is the current code:

<script type="text/javascript">
$(document).ready(function() 
{$('#slides').cycle({ pager: '#slideshow_links', pause: 1, speed: 1200, timeout: 6000,  next: '#next',prev: '#prev', cleartype:  true, cleartypeNoBg:  true });});</script>

And here's the HTML. Ideally, the Pause/Play button would go in between the two buttons there.

  <div id="controls">
    <span><a href="" id="prev"><img src="/images/left.gif" width="14" height="11" alt="Previous" title="Previous" style="border:0;"></a></span>
    <span><a href="" id="next"><img src="/images/right.gif" width="14" height="11" alt="Next" title="Next" style="border:0;"></a></span>
</div>

I already looked at the list of examples in the website, but I'm rather inexperienced in jQuery so any help is appreciated.

Thanks!

Answer 1

http://jsfiddle.net/Gcqfu/

<div id="controls">
    <span><a href="#" id="prev"><img src="/images/left.gif" width="14" height="11" alt="Previous" title="Previous" style="border:0;"></a></span>
     <span><a href="#" id="pauseOrPlay" data-playing='false'><img src="/images/play.gif" width="14" height="11" alt="Play" title="Play" style="border:0;"></a></span>
    <span><a href="#" id="next"><img src="/images/right.gif" width="14" height="11" alt="Next" title="Next" style="border:0;"></a></span>
</div>

js:

$("#pauseOrPlay").on("click", function(e) {
    e.preventDefault();
   var $this = $(this),
        playing = $this.data("playing"),
        $slides = $("#slides");
   if (!playing)
   {
       $this.data("playing", true);
       $this.children("img:first").attr("src", "/images/pause.gif").attr("title", "Pause").attr("alt", "Pause");  
       // call play for the plugin here
       $slides.cycle('resume');
   } 
    else
    {
        $this.data("playing", false);
       $this.children("img:first").attr("src", "/images/play.gif").attr("title", "Play").attr("alt", "Play");  
       // call pause for the plugin here 
       $slides.cycle('pause');
    }    
});