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

Solution 1

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');
    }
});

Solution 2

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');   
});

Solution 3

$(document).ready(function(){
    $(".bulb").click(function(){
    var src = $(this).attr('src');
    var newsrc = (src=='images/dim.png') ? 'images/glow.png' : 'images/dim.png';
    $(this).attr('src', newsrc );
    });
});

Even more reducing lines is possible but avoided confusion. Basically , it gets the current state attribute source and checks and assigns required source.

Solution 4

I know this is a late answer but what about using something simplier like:

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

View more solutions

Comments

[Ram]

Nice optimisation but not enough jQuery.

[jeffusu]

That was helpful. I switched to just using CSS backgrounds and it's a lot cleaner too.

[Diodeus - James MacFarlane]

Yeah, just use this and do it in one line of code: api.jquery.com/toggleClass

[nivniv]

this did not work for me since the browser loads full paths. @adeneo answer is the correct one