Toggling an image src with jQuery

Question

I wrote some code to toggle the src of an image and also to pause/resume the jQuery cycle2 plugin.

I'm not sure why it isn't working and would appreciate some help.

$('.play-pause').click(function(){
    if ($(this).attr('src', '/images/template/pause.png')) {
        $(this).attr('src', '/images/template/play.png');
        $('.cycle-slideshow').cycle('pause');   
    } else if ($(this).attr('src', '/images/template/play.png')) {
        $(this).attr('src', '/images/template/pause.png');
        $('.cycle-slideshow').cycle('resume');
    }
});

If I remove the 'else if' statement the first 'if' statement works.

Thanks for the help.

Jeff

Answer 1

Be more generic, and check the source for the image only, not the entire string :

$('.play-pause').on('click', function(){
    var isPause = this.src.indexOf('pause.png') != -1;
    this.src    = isPause  ? this.src.replace('pause.png', 'play.png') : this.src.replace('play.png','pause.png');

    $('.cycle-slideshow').cycle(isPause ? 'resume' : 'pause');   
});

Answer 2

For UI elements, such as pause/play buttons, you should be using CSS backgrounds, not inline images. That was you can simply swap class names to change the image.

You can use inline images, but you should simplify using class names, once again.

$('.play-pause').click(function(){
    if (!$(this).hasClass('play')) {
        $(this).attr('src', '/images/template/play.png');
        $(this).addClass('play')
        $('.cycle-slideshow').cycle('pause');   
    } else  {
        $(this).attr('src', '/images/template/pause.png');
        $(this).removeClass('play')
        $('.cycle-slideshow').cycle('resume');
    }
});