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

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

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

Answer 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.

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

Answer 5

This is another approach:

<!-- HTML -->
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/5805-200.png" class="fun-img" id="magic-toggle">

And for the jQuery

/* jQuery */
$('#magic-toggle').click(function() {
if($('.fun-img').attr('src') === plus) {
  $('.fun-img').attr('src', minus);
} else {
  $('.fun-img').attr('src', plus)
}
})

Needs some fun animation, probably, but gets the work done.

Here's a snippet:

var plus = 'https://d30y9cdsu7xlg0.cloudfront.net/png/5805-200.png';
var minus = 'https://d30y9cdsu7xlg0.cloudfront.net/png/5802-200.png';

$('#magic-toggle').click(function() {
  if ($('.fun-img').attr('src') === plus) {
    $('.fun-img').attr('src', minus);
  } else {
    $('.fun-img').attr('src', plus)
  }
})

.fun-img {
  width: 80px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/5805-200.png" class="fun-img" id="magic-toggle">

Answer 6

Occasionally it actually is reasonable to want to swap the image src directly rather than handle it in CSS (working around weird bugs, mostly). What I've done in this case is written a simple helper function that toggles between the initial src and an alternate src that you can also specify on the image element itself, like so:

function toggleImgSrc(jQueryObj) {
    tmp = jQueryObj.attr('src');
    jQueryObj.attr('src', jQueryObj.attr('toggle_src'));
    jQueryObj.attr('toggle_src', tmp);
}

and the image element itself just has an extra property called 'toggle_src' (or you could add it dynamically if you needed to):

<img src="initial_image.png" toggle_src="other_image.png"/>