Question

i have the following code. On click i would like to change to pause the slider and change the image to pause. This code pauses the slideshow but does not restart. Also it does not toggle the images.

$(document).ready(function () {
    $("#nextbackcontrols").show();
    $('.slideshow').cycle({
        fx: 'fade',
        prev: '#prev',
        next: '#next'
    });

    $('#play').click(function () {
        $('.slideshow').cycle('toggle');
        $("#play img").toggle(
          function () {
              $(this).find("img").attr({ src: "/common/images/play.gif" });
          },
          function () {
              $(this).find("img").attr({ src: "/common/images/pause.gif" });
          }
        );
    });

});

Answer 1

Try this:

$('#play').live("click", function () {
    $('.slideshow').cycle('toggle');
    $("#play img").toggle(
      function () {

          // previously you were `.find`ing an image within an image
          $(this).attr({ src: "/common/images/play.gif" });
      },
      function () {
          $(this).attr({ src: "/common/images/pause.gif" });
      }
    );
});